<div class="row"> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4>Declarative usage</h4> <h6 class="mt-3">Body only</h6> <ngb-toast> I am a simple static toast. </ngb-toast> <h6 class="mt-3">With a text header</h6> <ngb-toast header="Hello" [autohide]="false"> I am a simple static toast with a header. </ngb-toast> <ngb-alert type="secondary" [dismissible]="false">Clicking on the close icon won't do anything in this example.</ngb-alert> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4>Using a Template as header</h4> <ngb-toast> <ng-template ngbToastHeader> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M16.896 10l-4.896-8-4.896 8-7.104-4 3 11v5h18v-5l3-11-7.104 4zm-11.896 10v-2h14v2h-14zm14.2-4h-14.4l-1.612-5.909 4.615 2.598 4.197-6.857 4.197 6.857 4.615-2.598-1.612 5.909z"/></svg> <strong class="mx-1">Fancy</strong>header here </ng-template> Hello, I am toast. Have you noticed my header has been generated from a Template? </ngb-toast> <ngb-alert type="secondary" [dismissible]="false">Clicking on the close icon won't do anything in this example.</ngb-alert> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4>Closeable toast</h4> <ngb-toast *ngIf="show" header="Click my close icon →" [autohide]="false" (hide)="close()"> If you close me, I will automatically re-appear after a few seconds. </ngb-toast> <p *ngIf="!show">I'll be back!</p> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4>Prevent autohide on mouseover</h4> <p> In this demo, you can show a toast by clicking the button below. It will hide itself after a 5 seconds delay unless you simply hover it with your mouse. </p> <button class="btn btn-primary" (click)="showauto = true"> Click me to show a toast </button> <hr *ngIf="showauto"> <ngb-toast *ngIf="showauto" header="Autohide can be cancelled" [delay]="5000" [autohide]="autohide" (mouseenter)="autohide = false" (mouseleave)="autohide = true" (hide)="showauto = false; autohide = true" [class.bg-warning]="!autohide" > <div *ngIf="autohide"> Try to mouse hover me. </div> <div *ngIf="!autohide"> I will remain visible until you leave again. </div> </ngb-toast> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h4>Toast management service</h4> <button class="btn btn-primary" (click)="showStandard()" ngbTooltip="Will disappear in 5s">Standard toast</button> <button class="btn btn-success" (click)="showSuccess()" ngbTooltip="Will disappear in 10s">Success toast</button> <ng-template #dangerTpl> <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" width="24" height="24" viewBox="0 0 24 24"><path d="M10.872 6.831l1.695 3.904 3.654-1.561-1.79 3.426 3.333.954-3.417 1.338 2.231 4.196-4.773-2.582-2.869 2.287.413-3.004-3.792-.726 2.93-1.74-1.885-2.512 3.427.646.843-4.626zm-.786-6.831l-1.665 9.119-6.512-1.228 3.639 4.851-5.548 3.294 7.108 1.361-.834 6.076 5.742-4.577 9.438 5.104-4.288-8.064 6.834-2.677-6.661-1.907 3.25-6.22-6.98 2.982-3.523-8.114z"/></svg> Danger Danger ! </ng-template> <button class="btn btn-danger" (click)="showDanger(dangerTpl)" ngbTooltip="Will disappear in 15s">Danger toast</button> <app-toasts aria-live="polite" aria-atomic="true"></app-toasts> </div> </div> </div> </div> <!-- End Row -->