app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isVisible:boolean = true;
toggleVisibility(){
this.isVisible = !this.isVisible;
}
}
app.component.html
<h2>Angular - Toggle Element Visibility</h2>
<button
(click)="toggleVisibility()"
style="padding:12px;">
Toggle Visibility
</button>
<h3 *ngIf="isVisible">
Show Hide Me By Button Click Event
</h3>
- angular - How to create function
- angular - Display value using interpolation
- angular - How to use ternary operator
- angular - How to generate random number
- angular bootstrap - How to show an alert
- angular bootstrap - Dismissible alert
- angular bootstrap - Danger warning success alert
- angular bootstrap - Alert closed event
- angular bootstrap - Progressbar maximum value
- angular bootstrap - How to show striped Progressbar
- angular bootstrap - Light & dark Progressbar
- angular bootstrap - Popover custom CSS class
- angular bootstrap - Popover shown & hidden event
- angular bootstrap - Datepicker navigate to specific year month
- angular bootstrap - Datepicker navigate select specific date