How to display PrimeNG dialogs with Angular 19 standalone? - Stack Overflow

admin管理员组

文章数量:1406177

I'm trying to display a dialog when my API returns an error during authentication. My project is using Angular 19 standalone mode, so I don't have an AppModule.

I added the DialogService provider at Route level in the app.route.ts, then I provide my ToasterService (that's a service that shows small dialogs for X seconds), but when I call the method which opens the dialog in my DOM appears p-dynamicdialog but nothing appears on the UI.

Here is some code to clarify things :

app.route.ts

export const routes: Routes = [
  {
    path: 'account',
    component: AccountLayoutComponent,
    data: {
      permission: null,
      navigation: new PrimeNavigation('account', 'Login', [
        new NavigationItem('Login', 'Login', 'account/login'),
      ])
    },
    children: [
      {
        path: 'login',
        component: LoginComponent,
        providers: [DialogService, ToasterService]
      },
    ]
  }
]

toaster.service.ts

@Injectable({
  providedIn: 'root',
})
export class ToasterService {
  constructor(private readonly _dialogService: DialogService) { }

  public showError(message: string, isButtonVisible = false, textButton = 'Close'): DynamicDialogRef {
    return this.show(message, 'far fa-times-circle', isButtonVisible, textButton);
  }

  public show(message: string, icon: string | null, isButtonVisible = false, textButton = 'Close', isProgress = false): DynamicDialogRef {
    return this._dialogService.open(ToasterComponent, {
      header: 'Choose a Product',
      width: '70%',
      contentStyle: { "max-height": "500px", "overflow": "auto" },
      baseZIndex: 1000
    })
  }
}

loginponent.ts

@Component({
  templateUrl: './loginponent.html',
  styleUrls: ['./loginponent.scss'],
  standalone: true
})
export class LoginComponent {
  constructor(private readonly _toasterService: ToasterService) {}

  public onLoginClick(): void {
    *skip all the useless part*
    this.myService.authenticate(myData: MyObject)
    .pipe(...)
    .subscribe({
      next: () => { },
      error: (error) => {
        this._toasterService.showError('Auth failed!'); <= Here is the call
      }
    });
  }
}

Did I fet something to make it work?

本文标签： How to display PrimeNG dialogs with Angular 19 standaloneStack Overflow