How to set text/content for jqxNotificationComponent

[Alexander LanzParticipant]

Hello,

I want to use a notification component to notify the user about errors.
Therefore I added a jqxNotificationComponent into my html.
I want to set the error text dynamically, within a method like “displayErrorMessage”:

I’ve following code in my component:

@ViewChild('msgNotification') msgNotification: jqxNotificationComponent;

// ...

private displayError( msg: string ) {
    //##todo: set notifaction text to 'msg'
    this.msgNotification.open();
}

here is html (snippet) for my component:

    <angularNotification #msgNotification>
        dummy text
    </angularNotification>

I left out the code for creating the widget here, it is contained in the // … section.

How do I set the notification text dynamically?

[Ivo ZhulevParticipant]

Hi Alexander Lanz,

You can achieve that by changing the inner text/html of the widget before opening.
For example in our demo the widget template is:

<angularNotification #msgNotification>
    <div>
        Welcome to our website.
    </div>
</angularNotification>

To change it before opening simply do the following:

document.getElementsByTagName('angularNotification')[0].children[0].innerHTML = 'New Text';

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Alexander LanzParticipant]

thank you.

[Alexander LanzParticipant]

I ran into a problem with your suggested Code.
The reason is it takes the first element of the document which is problematic when having more than one notification widget within the component hierarchy.
The right solution would be to search only within the current component.

Any suggestions how to do this using Angular 2 code?

[Alexander LanzParticipant]

Hello Ivo,

I found a solution to the problem.
To search within the component, inject a ElementRef into the components constructor:

constructor( private elementRef: ElementRef ) { }

Then later, to search the notification widget:

var el:HTMLElement = this.elementRef.nativeElement;

el.getElementsByTagName('angularNotification')[ 0 ].children[ 0 ].innerHTML = msg;

HOWEVER, Angular 2 sees this as a security risk and recommends to directly access the DOM only as a last resort ( see: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html ).

I would prefer to have a setText() method in the notification widget to set the text directly.

What do you think?

regards,
Alexander Lanz

[Ivo ZhulevParticipant]

Hi Alexander Lanz,

This is custom development and if you want it, please write to sales@jqwidgets.com

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts