JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Menu & Tree › static text in smart-menu

Tagged: , , , , , , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 5, 2020 at 7:51 am #100957
    peter.jak
    Member

    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

    August 5, 2020 at 11:14 am #100958
    Hristofor
    Member

    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

    August 5, 2020 at 4:56 pm #100959
    peter.jak
    Member

    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

    August 6, 2020 at 9:24 am #100960
    Hristofor
    Member

    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

    August 17, 2020 at 3:39 pm #100975
    peter.jak
    Member

    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

    August 17, 2020 at 8:10 pm #100976
    admin
    Keymaster

    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
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.