CODEWITHSUNDEEP
angular6
bhavesh
bhavesh

Reputation: 84

Angular 6 - angular-notifier

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.

Upvotes: 1

Views: 4603

Answers (2)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

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
        });
    }
}

Upvotes: 0

Thiago Reis
Thiago Reis

Reputation: 41

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
    });
 }
}

Upvotes: 1

Related Questions