CODEWITHSUNDEEP
javascriptangularangular7ng-show
Ayush Jain AJ
Ayush Jain AJ

Reputation: 236

Show Hide a div in angular 7

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

Upvotes: 22

Views: 96995

Answers (7)

Rui Marques
Rui Marques

Reputation: 8904

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();
  }

Upvotes: 0

Saumyajit
Saumyajit

Reputation: 746

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>

Upvotes: 1

Abhishek Kumar
Abhishek Kumar

Reputation: 2539

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

Upvotes: 3

X3Vikas
X3Vikas

Reputation: 101

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

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

Upvotes: -1

Abderrahim Soubai-Elidrisi
Abderrahim Soubai-Elidrisi

Reputation: 5202

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;

}

Upvotes: 22

Seba Cherian
Seba Cherian

Reputation: 1793

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>

Upvotes: 14

ProblemsEverywhere
ProblemsEverywhere

Reputation: 547

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

Upvotes: 5

Related Questions