Issue
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?
Solution
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 });
}
}
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.