Skip to main content

angular bootstrap - How to show Toast message

app.component.ts 

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  showToast:boolean = false;

  onClick(){
    this.showToast = true;
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - How to show Toast message
</h4>


<button (click)="onClick()">Show Toast</button>
<br/><br/>

<ngb-toast 
  *ngIf="showToast" 
  header="Sample Toast" 
  [autohide]="false" 
  (hidden)="showToast=false">
    Simple closable static toast with a header.
</ngb-toast>
More Angular tutorials
Labels: