Taiga UI 5.0 is out!

NotificationMiddle KIT

Examples API GitHub

On this page

A modal component to indicate an ongoing blocking action

Default

Basic empty loader. 
    
      
    

      
      
    

  
    
      <ng-template
    [tuiNotificationMiddleOptions]="{closable: true}"
    [(tuiNotificationMiddle)]="open"
/>
<button
    tuiButton
    type="button"
    (click)="open = true"
>
    Show
</button>

Content

Changing content and adding text to the card.
  
    
      
    

      
      
    

  
    
      <ng-template
    [tuiNotificationMiddleOptions]="{closable: true}"
    [(tuiNotificationMiddle)]="text"
>
    Loader with text
</ng-template>
<ng-template
    [tuiNotificationMiddleOptions]="{closable: true}"
    [(tuiNotificationMiddle)]="icon"
>
    <img
        alt=""
        [src]="'@tui.user' | tuiIcon"
    />
    Custom icon
</ng-template>
<button
    tuiButton
    type="button"
    (click)="text = true"
>
    Text
</button>
&nbsp;
<button
    tuiButton
    type="button"
    (click)="icon = true"
>
    Icon
</button>

Transition

Dynamically updating content and closing with timeout. Don't forget Animated directive! 
    
      
    

      
      
    

  
    
      <ng-template
    [tuiNotificationMiddle]="open()"
    (tuiNotificationMiddleChange)="open.set($event)"
>
    @if (loading()) {
        <tui-loader tuiAnimated />
        <div tuiAnimated>Please wait...</div>
    } @else {
        <div
            appearance="positive"
            tuiAnimated
            tuiAvatar="@tui.check"
        ></div>
        <div tuiAnimated>Operation successful!</div>
    }
</ng-template>
<button
    tuiButton
    type="button"
    (click)="onClick()"
>
    Show
</button>

Service

Design specs require notification to be shown for a minimum of 600ms to prevent visual flickering for short requests. 
    
      
    

      
      
    

  
    
      <button
    tuiButton
    type="button"
    (click)="onClick()"
>
    Show
</button>
GitHub StackBlitz