HTML Elements Forums Navigation Menu & Tree static text in smart-menu

This topic contains 5 replies, has 3 voices, and was last updated by Avatar admin 3 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #100957
    Avatar
    peter.jak
    Participant

    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

    #100958
    Avatar
    Hristofor
    Participant

    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

    #100959
    Avatar
    peter.jak
    Participant

    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

    #100960
    Avatar
    Hristofor
    Participant

    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

    #100975
    Avatar
    peter.jak
    Participant

    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

    #100976
    Avatar
    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.