static text in smart-menu

[peter.jak]

Hello
I would like to display some static text (a username async loaded from angular ) in <smart-menu> (e.g. logged-on user name)

<smart-menu>
  <smart-menu-items-group>
  File
    <smart-menu-item>...</smart-menu-item>
  </smart-menu-items-group>
  <span>{{ userName | async }}</span>

</smart-menu>

Unfortunately the span tag is removed from the menu and nothing is showed.
How can I add some static text in menu?
 
Peter

[Hristofor]

Hi peter.jak,
Smart.Menu component can only contain Smart.Menu or Smart.MenuItemsGroup elements. So in order to add any static text you must define it inside a Smart.MenuItem for example:
<smart-menu-item><span>{{ userName | async }}</span></smart-menu-item>
If you want the item to be completely custom ( not selectable like the rest, etc) you can set the custom content as a template, like so:

<smart-menu>
 <smart-menu-item label="itemTemplate"></smart-menu-item>
</smart-menu>
<template id="itemTemplate">
 <span>{{ userName | async }}</span>
</template>

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[peter.jak]

Hi Christopher
Unfortunately the nested <smart-menu-item><span>{{ userName | async }}</span></smart-menu-item> works only for static content like:
<smart-menu-item><span>SOMEBODY</span></smart-menu-item> and not for async angular items.
The userName is specified in angular controller: public userName: Observable<string>;
The displayed menu item for async variable is like “Item 3” instead of variable value.
 
Peter

[Hristofor]

Hi peter.jak,
A possible solution is to create an Angular Component with the AsyncPipe like the one shown here and create/append it dynamically to the target Smart.MenuItem when the Smart.Menu is ready. This should be done on ready because custom elements generate their inner HTML structure dynamically. Binding to onReady is as simple as binding to onClick:
<smart-menu-items-group (onReady)="handleReady($event)">...</smart-menu-items-group>.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[peter.jak]

Hallo Christopher
I think this will not work.

• The onReady event may be triggered before the angular async pipe gets its value.
• The async pipe simply doesn’t work in menu. Let’s say I want do display a clock in the menu

export class SomeAngularComponent implements OnInit {
public currentTime = new Subject<string>();
ngOnInit(): void {
  setInterval(() => {
    const newTime = new Date().toISOString();
    this.currentTime.next(newTime);
  }, 1000);
}

In html template I have then
{{currentTime | async}}
The time will be never updated in Menu.
Peter

[admin]

Hi Peter,
The onReady is called when the Menu is rendered and this is bound to the Angular’s lifecycle after the view is initialized i.e it should work.
Another possible solution could be to data bind the Menu to a dataSource by using initialization similar to Angular’s Reactive Forms. We have an example about binding a menu to a data source here: https://www.htmlelements.com/angular/demos/menu/data-source/
Best regards,
Peter Stoev
jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts