how to show/hide component on button click in angular 8 code example
Example 1: hide and show in angular 8
<button (click)="toggleShow()" type="checkbox" >show/hide</button>
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
Div Content
</div>
Example 2: hide and show in angular 8
isShown: boolean = false ;
toggleShow() {
this.isShown = ! this.isShown;
}
Example 3: hide element when pressing button angular
<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>
Your TypeScript
export class AppComponent {
private isButtonVisible = true;
}
Example 4: in angular click button button hide div and show div
<div *ngIf="div1">
ABC
</div>
<div *ngIf="div2">
DEF
</div>
<div *ngIf="div3">
GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>
in .ts file
div1:boolean=true;
div2:boolean=true;
div3:boolean=true;
div1Function(){
this.div1=true;
this.div2=false;
this.div3=false
}
div2Function(){
this.div2=true;
this.div1=false;
this.div3=false
}
div3Function(){
this.div3=true;
this.div2=false;
this.div1=false
}
Example 5: hide and show in angular 8
isShown: boolean;
ngOnInit(){
isShown = false;
}
toggleShow() {
this.isShown = ! this.isShown;
}
<div *ngIf="isShown" class="row container-fluid" id="divshow">
content
</div>