14

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

Adnan Sharif
  • 814
  • 6
  • 17
Ayush Jain AJ
  • 156
  • 1
  • 1
  • 5
  • 4
    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
  • 1
    Please provide a [mcve] – Prerak Sola Mar 27 '19 at 10:36

7 Answers7

15

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;

}
Abderrahim Soubai-Elidrisi
  • 4,194
  • 1
  • 20
  • 30
10

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>
Seba Cherian
  • 1,612
  • 3
  • 17
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

Drusto
  • 488
  • 2
  • 9
2

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

Abhishek Kumar
  • 2,187
  • 8
  • 21
0

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>
Saumyajit
  • 496
  • 4
  • 9
0

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();
  }
Rui Marques
  • 6,898
  • 3
  • 48
  • 82
-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>
X3Vikas
  • 81
  • 3
  • 8