Show Hide a div in angular 7

Question

I am trying to show/hide a div in angular 7 using ng-model and ng-hide but its not working.

button to Show/Hide- used ng-model to set expression

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

div to Show/Hide, Used ng-hide to hide the div

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

I have tried ng-model and ng-hide still it's not working. Please provide a solution

Answer 1

In your HTML

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

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

</div>

in your component class add this:

isShown: boolean = false ; // hidden by default


toggleShow() {

this.isShown = ! this.isShown;

}

Answer 2

Try this solution:

Solution 1:

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

Solution 2:

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