I am using angular-notifier for notifications. But I can't seem to find any support for custom HTML. When I append any html tag to the message to be displayed in toast, the html tag too renders in the message. Let me know if any one has the solution.
2 Answers
It's possible to customize the notifier using ng-template. First define a custom ng-template in your component HTML:
<ng-template #customNotification let-notificationData="notification">
<my-custom-alert type="notificationData.type">
{{ notificationData.message }}
// Here you can define any custom HTML
</my-custom-alert>
</ng-template>
After, Inside your component, you can then reference the ng-template using template variable #customNotification using Angular's ViewChild:
import { ViewChild } from '@angular/core'
...
@Component({...})
export class MyComponent {
@ViewChild('customNotification') customNotificationTmpl;
...
constructor(private notifierService: NotifierService) {}
showNotification() {
const msg = {
message: 'Hi there!',
type: 'info'
};
this.notifier.show({
message: msg.message,
type: msg.type,
template: this.customNotificationTmpl
});
}
}
6 Comments
bhavesh
Yes, we can customize the notifier using ng-template. But I am getting response from my webservice in HTML format. Every response is different. There is fix HTM Lstructure.
Thiago Reis
Can you show some code example? I don't understand what's the problem. The HTML response from web service may not embed into ng-template?
Anton Mitsev
I have reached a similar problem - I even cannot add a new line: this.notifier.notify('error', 'Multiline <br/> message ' +"\n" + 'here will show as a single line' ... I have go through this the last half an hour and still found only that topic. I am not sure that the only way of adding a new line, or just a simple <b> tag should be a whole template?
Anton Mitsev
Well guys, here is the decision: stackoverflow.com/questions/53065215/… We just put the content in the [innerHTML] attribute.
<span [innerHTML]="notificationData.message"></span>
Darren Street
I have noticed that Angular is stripping out code that its thinks suspect when inserting html. For instance adding a <strong> or <i> is fine but try add an anchor with classes.
|
There is an easy way in the documentation angular-notifier
You can define a custom ng-template as follows in yout component.html file:
<notifier-container>
<ng-template #customNotification let-notificationData="notification">
<span type="notificationData.type">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="#1976d2"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
<span>{{ notificationData.message }} to angular-notifier</span>
</span>
</ng-template>
</notifier-container>
Inside your component, you can then reference the by its template variable #customNotification using Angular's ViewChild:
import { ViewChild } from "@angular/core";
@Component({
// ...
})
export class SomeComponent {
@ViewChild("customNotification", { static: true }) customNotificationTmpl;
constructor(private notifierService: NotifierService) {}
showNotification() {
this.notifier.show({
message: "Hi there!",
type: "info",
template: this.customNotificationTmpl
});
}
}
