Managing dynamic properties

[Cyril]

Hi there,

 

We are having hard times to get our notifications right. Here is how our application works.

We have created a custom NotifcationService that abstracts notification for both desktops (Kendo UI) and mobiles (Ionic). Application components can trigger our NotificationService whenever needed. For instance, for the login page, we display a notification on error or success. Our notifications always have a title / header and a content message.

 

Kendo UI notification for Angular provides three different ways: string (doesn't allow html tags), TemplateRef and Component.

• The first option would have been perfect if we would have been able to put some tags to format the output.
• The second option has not been considered given our abstraction logic.
• We gave a try to the third option but without success for the time being. We created a custom NoticationComponent with two inputs: title (string) and message (string). We used ComponentFactoryResolver to get an instance of our Component and send it our variables. But when we try to use its instancefor NotificationSettings.content it fails:

Type 'NotificationComponent' is not assignable to type 'string | Function | TemplateRef<any>'

whereas passing NotificationComponent directly to NotificationSettings.content works well (but it is then not possible to pass input variables).

 

Are we missing something here? What would have been nice is either to:

1. Allow tags in content string
2. Manage an alternative object such as title, message
3. Allow input parameters for Component rendering case

Thanks

C.

[Martin]

Hi Cyril,

Thank you for the provide details.

Indeed the approach that uses a custom component as content is the way to go. Passing the desired header and title values through an @Input directive can be achieved by getting the instance of the component:

public show(): void {
    const notificationRef: NotificationRef = this.notificationService.show({
      content: CustomComponent,
      animation: { type: "slide", duration: 200 },
      position: { horizontal: "right", vertical: "top" },
      type: { style: "warning", icon: false },
      closable: false
    });

    const notificationInstance = notificationRef.content.instance;
    notificationInstance.header = "Some Custom Header";
    notificationInstance.title = "Title";
..
}

Please check the following example that demonstrates how custom input properties can be passed dynamically to the notification. Custom HTML tags also can be passed as a string to the custom component and rendered on the page through innerHTML option:

https://stackblitz.com/edit/angular-cbgv3m?file=app%2Fapp.component.ts

I hope this helps. Let me know if I am missing something or if any further questions come up on this case.

Regards,
Martin
Progress Telerik

[Cyril]

Hi Martin,

 

Thanks a lot for pointing me out to the right direction. I was close but nonetheless didn't think about that option, damn!

I tried it out and it works as expected. However I think I spotted a little positioning issue. I guess position is calculated based on notification content length. As we are setting inputs slightly after the component generation, it gets shifted to the right.

Here is a demo https://stackblitz.com/edit/angular-cbgv3m-kp9caj

 

Regards

C.

[Martin]

Hi Cyril,

Thank you for the provided StackBlitz.

In this case, the Notification component is rendered before receiving its content. That is why it is centered according to the current content (notification initially is empty). Since the message is passed dynamically the content is added to the notification after it is being centered which make it looks that is shifted to the right:

https://stackblitz.com/edit/angular-cbgv3m-wovj99?file=app/app.component.ts

As there is no way to know the Notification content in advance, the most straight forward solution, in this case, is to set the width property when the Notification is created:

https://stackblitz.com/edit/angular-cbgv3m-juxu9n?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Julian]

@Martin this is 3 years ago is there a solution in the meantime?

[Martin]

Hi Julian,

So far there are no changes in how the Notification behaves in this particular scenario, due to the dynamic nature of the case. The Notifications don't know in advance the correct width according to the content since this content can be received from any remote source and can be anything.

The proposed approaches are still valid to this date.

What else could be done, is to show the Notification after the data is being received (however in this case the notification might not appear immediately on certain actions).

[Cyril]

Hi Martin,

Yes, got it, thanks! Didn't notice the width properties before, it works well.

Thanks again for your support, much appreciated.

C.