🐞 - AlertService - Nothing displayed

[MagicKitty]

Playground Link

No response

Description

Simple Nx monorepo project, standalone components.

Online playground is nice idea, should be up to date with angular versions though.

My app.config.ts :

import { TuiRootModule } from '@taiga-ui/core';
import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom([
      BrowserModule,
      BrowserAnimationsModule,
      TuiRootModule
    ]),
  ],
};

My component : Html

<button
      class="fixed bottom-0 pb-4 tui-form__button"
      tuiButton
      type="submit"
      (click)="
        inscriptionService.inscriptionForm.invalid && showNotification();
        !inscriptionService.inscriptionForm.invalid &&
          inscriptionService.nextStep$.next()
      "
    >
      Suivant
    </button>

TS

private readonly alerts = inject(TuiAlertService);

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

Imports/providers
import { Component, inject } from '@angular/core';
import { TuiAlertService, TuiButtonModule, TuiErrorModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
import { TUI_VALIDATION_ERRORS, TuiFieldErrorPipeModule, TuiInputModule, TuiStepperModule } from '@taiga-ui/kit';
import { RouterLink } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { AsyncPipe } from '@angular/common';

imports: [
    RouterLink,
    ReactiveFormsModule,
    TuiInputModule,
    TuiTextfieldControllerModule,
    TuiErrorModule,
    TuiFieldErrorPipeModule,
    AsyncPipe,
    TuiStepperModule,
    TuiButtonModule
  ],
  providers: [
    {
      provide: TUI_VALIDATION_ERRORS,
      useValue: {
        required: 'Le champ est requis',
      },
    },
  ],

Angular version

18

Taiga UI version

3.82.0

Which browsers have you used?

• [ ] Chrome
• [X] Firefox
• [ ] Safari
• [ ] Edge

Which operating systems have you used?

• [ ] macOS
• [ ] Windows
• [X] Linux
• [ ] iOS
• [ ] Android

[splincode]

try to check

importProvidersFrom(
    TuiRootModule,
    TuiAlertModule,
    TuiDialogModule,
    TuiPushModule,
)

[MagicKitty]

I tried to import, nothing better

[splincode]

Can you reproduce it on stackblitz?

[MagicKitty]

https://stackblitz.com/edit/stackblitz-starters-xxgygf?file=src%2Fmain.ts

[splincode]

Fixed: https://stackblitz.com/edit/stackblitz-starters-rvpvkx?file=src%2Fmain.ts

[MagicKitty]

Can see you added the TuiRootModule in the imports, but what else? As when I add it to my stackblitz, does not work

[MagicKitty]

Can see you added the TuiRootModule in the imports, but what else? As when I add it to my stackblitz, does not work

I see now...

[MagicKitty]

Fixed: https://stackblitz.com/edit/stackblitz-starters-rvpvkx?file=src%2Fmain.ts

Thx!