Passing dynamic TemplateRef in NzMessageService - Angular 15

Question

I'm working on an Angular application where I'm using NzMessageService from Ng-Zorro Ant Design to display messages. I'm trying to pass a dynamic TemplateRef to the NzMessageService but facing some challenges.

Here's a simplified version of the code:

import { Injectable, TemplateRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';

@Injectable({
  providedIn: 'root',
})
export class DynamicMessageService {
  constructor(private messageService: NzMessageService) {}

  showMessage(dynamicText: string | TemplateRef<void>): void {
    // I'm trying to create a dynamic component or view and pass it to NzMessageService
    
    this.messageService.create('error', /* ??? */, { nzDuration: 80000 });
  }
}

The dynamicText can be either a string or a TemplateRef. I've tried creating a dynamic component or view, but I'm encountering issues with type mismatches.

Can someone provide guidance on the best approach to achieve this in Angular?

Answer 1

UPDATE

If you just want to configure the templates, create a separate component, that will contain the templates, if you want different templates, just create more template reference and separate methods to open the messages.

messages container to contain all the templates

import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
import { NzMessageDataOptions, NzMessageService } from 'ng-zorro-antd/message';
import { MessageService } from '../message-service.service';
import { CustomComponentShowInsideMessageComponent } from './custom-component-show-inside-message/custom-component-show-inside-message.component';

@Component({
  selector: 'app-custom-message',
  template: `
  <ng-template #template>
    <app-custom-component-show-inside-message/>
  </ng-template>
  `,
  imports: [CustomComponentShowInsideMessageComponent],
  standalone: true,
})
export class CustomMessageComponent {
  @ViewChild('template') template!: TemplateRef<void>;

  constructor(private message: MessageService) {}

  ngAfterViewInit() {
    debugger;
    this.message.template = this.template;
  }
}

message service

import { Injectable, TemplateRef } from '@angular/core';
import { NzMessageDataOptions, NzMessageService } from 'ng-zorro-antd/message';

@Injectable({
  providedIn: 'root',
})
export class MessageService {
  template!: TemplateRef<void>;

  constructor(private message: NzMessageService) {}

  open(
    type: 'success' | 'info' | 'warning' | 'error' | 'loading' | string,
    customTemplate: TemplateRef<void> = null,
    options: NzMessageDataOptions = null
  ): void {
    this.message.create(type, customTemplate || this.template, options);
  }
}

app component

import { Component } from '@angular/core';

import { MessageService } from './message-service.service';

@Component({
  selector: 'nz-demo-message-info',
  template: ` 
  <button nz-button [nzType]="'primary'" (click)="createBasicMessage()">Display normal message</button> 
  <app-custom-message/>
  `,
})
export class NzDemoMessageInfoComponent {
  constructor(private message: MessageService) {}

  createBasicMessage() {
    this.message.open('error', null, { nzDuration: 80000 });
  }
}

stackblitz