angularnotificationstaiga

Proper migration of TuiNotification in Taiga UI v3 to v4

I am doing Taiga UI migation from v3 to v4 in Angular project. How should TuiNotification be used in v4, if I want to use it for constants like TuiNotification.Warning. This worked in v3, but it was depricated and they suggested to use TuiNotificationT from the same package, but it doesn't exist in v4.

Here's example of how the current code looks like:

...
import { TuiNotification } from '@taiga-ui/core';
...

@Injectable()
export class SomeInputService extends RxState<{
}> {
  constructor(
    private notifications: TuiAlertService
  ) {
    super();

    this.doSomething();
  }

  private doSomething() {
    if (!something) {
       return this.showNotification(
         marker('Not working'), 
         marker('Wrong file'),
         **TuiNotification.Warning**       
       );
    }
    else {
       return this.showNotification(
         marker('Some error'),
         text ?? '',
         **TuiNotification.Error**
       );
    }
  }

  private showNotification(
    title: string,
    text: string,
    status: TuiNotification
  ) {
    const label = this.transloco.translate(title);
    const message = this.transloco.translate(text);
    this.hold(
      this.notifications.open(message, { status, label, autoClose: 10000 })
    );
  }
}

The error I get is Property 'Warning' does not exist on type 'typeof TuiNotification'.ts

Solution

  • In v4 TuiNotification has changed from an enum to a component TuiNotification.

    notification.directive.ts - Source Code

    Also, when we fire .open method, we must subscribe to it, for the popup to open.

    private showNotification(label: string, message: string, appearance: string) {
    this.notifications.open(message, { label, appearance }).subscribe();
}

    The error appearance also seems to work, even though it is not present in the source code type.

    So you need to configure it, based on string values. You can use the values from the below list and it will work.

    appearance.options.ts - Source Code

    type Appearance = TuiLooseUnion<
    | 'accent'
    | 'action-destructive'
    | 'action-grayscale'
    | 'action'
    | 'flat-destructive'
    | 'flat-grayscale'
    | 'flat'
    | 'floating'
    | 'glass'
    | 'icon'
    | 'info'
    | 'negative'
    | 'neutral'
    | 'outline-destructive'
    | 'outline-grayscale'
    | 'outline'
    | 'positive'
    | 'primary-destructive'
    | 'primary-grayscale'
    | 'primary'
    | 'secondary-destructive'
    | 'secondary-grayscale'
    | 'secondary'
    | 'textfield'
    | 'warning'
>;

    Full Code:

    import {
ChangeDetectionStrategy,
Component,
inject,
Injectable,
} from '@angular/core';
import {
TuiAlertService,
TuiAppearance,
TuiAppearanceOptions,
TuiButton,
} from '@taiga-ui/core';

import { TuiNotification } from '@taiga-ui/core';

@Injectable({
providedIn: 'root',
})
export class SomeInputService {
constructor(private notifications: TuiAlertService) {
    this.doSomething();
}

private doSomething() {
    return this.showNotification('Not working', 'Wrong file', 'error');
}

private showNotification(label: string, message: string, appearance: string) {
    this.notifications.open(message, { label, appearance }).subscribe();
}
}

@Component({
selector: 'app',
standalone: true,
exportAs: 'Example1',
imports: [TuiButton],
templateUrl: './app.template.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
private readonly alerts = inject(TuiAlertService);
private readonly someService = inject(SomeInputService);

protected showNotification(): void {
    this.alerts
    .open('Basic <strong>HTML</strong>', { label: 'With a heading!' })
    .subscribe();
}
}

    Stackblitz Demo