Показать Скрыть div в угловых 7

Question

Я пытаюсь показать / скрыть div в angular 7, используя ng-модель и ng-hide, но он не работает.

button, чтобы показать / скрыть - используется ng-model чтобы задать выражение

    <button type="checkbox" ng-model="show" >show/hide</button>

div чтобы показать / скрыть, Использовано ng-hide, чтобы скрыть div

<div class="row container-fluid" ng-hide="show" id="divshow" >
  Div Content
</div>    
</body>
</html>

Я пробовал ng-model и ng-hide все еще это не работает.Пожалуйста, предоставьте решение

Answer 1

Вы можете использовать change обработчик событий, если вы используете type='checkbox'

<input type="checkbox" (change)="show = !show" ng-model="show" />
Div to Show/Hide

<div class="row container-fluid" *ngIf="show" id="divshow" >
Div Content
</div>

Демонстрация Stackblitz

Answer 2

Вы можете использовать <div *ngIf="show"

и использовать в своем .ts файле логическое значение, которое вы можете изменить, если кнопка будет нажата

Answer 3

вы должны использовать флаг В вашем файле TS, по умолчанию флаг false

<button type="checkbox" (click)="flag= !flag">{{falg=== true ? 'Show' : 'Hide'}}</button>

Answer 4

в вашем HTML

<button (click)="toggleShow()" type="checkbox" >show/hide</button>

<div *ngIf="isShown" class="row container-fluid"  id="divshow" >
Div Content

</div>

в вашем классе компонентов добавьте это:

isShown: boolean = false ; // hidden by default


toggleShow() {

this.isShown = ! this.isShown;

}

Answer 5

Попробуйте это решение:

Решение 1:

<div *ngIf="show" class="row container-fluid"  id="divshow" >
        Div Content
    </div>

Решение 2:

<div [hidden]="!show" class="row container-fluid"  id="divshow" >
            Div Content
        </div>