Toast — Angular

Installation

npm install @fluix-ui/angular @fluix-ui/core @fluix-ui/css

Basic Usage

1. Add the Toaster component

Import FluixToasterComponent and place it once in your root layout (e.g. AppComponent):

import { Component } from "@angular/core";
import { FluixToasterComponent } from "@fluix-ui/angular";
import "@fluix-ui/css";

@Component({
  standalone: true,
  imports: [FluixToasterComponent],
  template: `
    <fluix-toaster />
    <button (click)="onSave()">Save</button>
  `,
})
export class AppComponent {
  onSave() {
    // see next step
  }
}

2. Inject the service

Use FluixToastService to fire toasts from any component or service:

import { Component } from "@angular/core";
import { FluixToastService } from "@fluix-ui/angular";

@Component({ ... })
export class MyComponent {
  constructor(private fluix: FluixToastService) {}

  onSave() {
    this.fluix.success("Saved!");
    // or with full options:
    this.fluix.success({ title: "Done", description: "Your changes were saved." });
  }

  onError() {
    this.fluix.error("Something went wrong");
  }
}

Toaster Component

<fluix-toaster [config]="{ position: 'bottom-right', layout: 'notch', offset: 24 }" />

Props

Prop	Type	Default	Description
`config`	`FluixToasterConfig`	—	Full configuration object (position, layout, offset, defaults)

Toast Options

Inject FluixToastService and call this.fluix.success() from any component method, guard, or HTTP interceptor. The service is providedIn: 'root', so no module imports needed:

@Component({
  standalone: true,
  template: `<button (click)="handleSave()">Save</button>`,
})
export class SettingsComponent {
  constructor(private fluix: FluixToastService) {}

  async handleSave() {
    await this.settingsService.save();
    this.fluix.success({
      title: "Settings saved",
      description: "Your preferences have been updated.",
      duration: 5000,
      theme: "dark",
      roundness: 20,
      icon: "✨",
    });
  }
}

The theme option accepts any string — "light", "dark", or a custom name you define in CSS. See Theming for details.

Promise Support

Wrap any Promise to show a loading toast that transitions to success or error. Useful in services or HTTP interceptors:

@Component({
  standalone: true,
  template: `<button (click)="loadUsers()">Refresh</button>`,
})
export class UserListComponent {
  constructor(
    private fluix: FluixToastService,
    private http: HttpClient,
  ) {}

  loadUsers() {
    this.fluix.promise(
      firstValueFrom(this.http.get<User[]>("/api/users")),
      {
        loading: { title: "Loading users..." },
        success: (users) => ({
          title: "Users loaded",
          description: `Found ${users.length} users`,
        }),
        error: (err) => ({
          title: "Failed to load",
          description: err.message,
        }),
      }
    );
  }
}

Action Button

Show a toast with an undo action — useful after destructive operations. Angular’s dependency injection makes it easy to wire up restore logic:

@Component({
  standalone: true,
  template: `<button (click)="handleDelete(item)">Delete</button>`,
})
export class ItemRowComponent {
  @Input() item!: Item;
  constructor(
    private fluix: FluixToastService,
    private itemService: ItemService,
  ) {}

  handleDelete(item: Item) {
    this.itemService.delete(item.id);
    this.fluix.action({
      title: "Item deleted",
      description: `"${item.name}" has been removed.`,
      button: {
        title: "Undo",
        onClick: () => {
          this.itemService.restore(item.id);
          this.fluix.success({ title: "Restored!" });
        },
      },
    });
  }
}

Custom Description (NgTemplate)

For rich content, pass a template + context instead of a string:

import { Component, ViewChild, TemplateRef } from "@angular/core";
import { FluixToastService, type FluixDescriptionTemplate } from "@fluix-ui/angular";

interface BookingData {
  flight: string;
  route: string;
}

@Component({
  template: `
    <ng-template #bookingTpl let-data>
      <div class="booking-card">
        <strong>{{ data.flight }}</strong>
        <span>{{ data.route }}</span>
      </div>
    </ng-template>
    <button (click)="showBooking()">Show</button>
  `,
})
export class MyComponent {
  @ViewChild("bookingTpl") bookingTpl!: TemplateRef<BookingData>;

  constructor(private fluix: FluixToastService) {}

  showBooking() {
    this.fluix.success({
      title: "Booking Confirmed",
      description: {
        templateRef: this.bookingTpl,
        context: { flight: "UA-920", route: "DEL → SFO" },
      } satisfies FluixDescriptionTemplate<BookingData>,
    });
  }
}

This works with fluix.promise() too — pass { templateRef, context: data } in the success callback.

Layout Modes

<!-- Stack: vertical list of individual toasts -->
<fluix-toaster [config]="{ layout: 'stack' }" />

<!-- Notch: compact island (toasts share one container) -->
<fluix-toaster [config]="{ layout: 'notch' }" />

API Summary

Export	Type	Description
`FluixToastService`	Injectable	`success()`, `error()`, `warning()`, `info()`, `action()`, `promise()`, `dismiss(id)`, `clear(position?)`, `getMachine()`
`FluixToasterComponent`	Standalone component	Place once in your app root
`FluixDescriptionTemplate<T>`	Type	`{ templateRef: TemplateRef<T>; context: T }` for custom description content
`fluix`	Object	Imperative API re-exported from `@fluix-ui/core` (prefer the service for Angular apps)

How It Works in Angular

The Angular adapter provides a standalone FluixToasterComponent that subscribes to the Fluix core store via OnPush change detection. Each toast is rendered with Angular’s template engine, using the same [data-fluix-*] data-attribute contract as all other adapters.

FluixToastService is a providedIn-root injectable that wraps the core fluix API. Since it’s a singleton service, you can inject it in any component, service, guard, or interceptor.

For rich description content, Angular uses NgTemplateOutlet instead of JSX (React) or VNodes (Vue). Pass a TemplateRef with a typed context and Fluix renders it inside the toast body.