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

Possible duplicate of [What is the equivalent of ngShow and ngHide in Angular?](https://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular) — Igor, Mar 27 '19 at 10:36

score 20 · Answer 1 · answered Mar 27 '19 at 10:38

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;

}

score 12 · Answer 2 · answered Mar 27 '19 at 10:36

12

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>

answered Mar 27 '19 at 10:36

Seba Cherian

1,755
6
18

1

There is a big difference between the two. ngIf removes and creates the element. [hidden] no. – robBerto Mar 25 '20 at 18:49

score 4 · Answer 3 · answered Mar 27 '19 at 10:34

4

You can use <div *ngIf="show"

and use in your .ts file a boolean that you can change the value if the button is tiggered

answered Mar 27 '19 at 10:34

ProblemsEverywhere

517
2
9

score 3 · Answer 4 · answered Mar 27 '19 at 10:51

3

You can use change event handler if you are using 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 Demo

answered Mar 27 '19 at 10:51

Abhishek Kumar

2,501
10
25

I can ask you a question concerning your code? – elodie Aug 11 '21 at 09:52

score 1 · Answer 5 · answered Mar 08 '21 at 08:22

1

Best Possible Way :

<input type="checkbox" (change)="show = !show" ng-model="show"/>
show/hide

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

answered Mar 08 '21 at 08:22

Saumyajit

678
8
10

score 0 · Answer 6 · answered Mar 23 '21 at 19:48

Here is a neat way to hide/remove items, specially handy if there is a list of items.

Note how it takes advantage of Angular's template variables (#ListItem).

<ng-container *ngFor="let item of list">
  <div #ListItem>
    <button (click)="close(ListItem)">
  </div>
</ng-container>

  close(e: HTMLElement) {
    e.remove();
  }

score -1 · Answer 7 · answered Mar 27 '19 at 10:38

-1

you should use a flag In your ts file, By default flag false

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

answered Mar 27 '19 at 10:38

X3Vikas

101
2
9

Show Hide a div in angular 7

7 Answers7