Primeng: Html support for Menu Components

[andyg3]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[X] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/t4IjvgHqKPFzpdGBVhL6?p=preview

Current behavior
MenuItem current accepts a _label_ property containing the text for the item, which is added to the component via interpolation. This means that an HTML formatted label is not possible. Any HTML in the property will be displayed in its original markup.

Expected behavior
_label_ should allow HTML content, or a new option (htmlLabel perhaps?) could be used in an innerHTML binding on the LI element

What is the motivation / use case for changing the behavior?
Many menus have some degree of formatting of the item - whether for simple styling, or, in my case, adding a "open in new tab" icon

Please tell us about your environment:
Windows 7, VS2017, Node

• Angular version: 4.2.3

• PrimeNG version: 4.1.3

• Browser: all

• Language: all

• Node (for AoT issues): node --version = 6.11.4

[cagataycivici]

Should we add escape property instead? If set to false we use innerHTML instead of interpolation?

[andyg3]

That's a great idea!

[paulyipkh]

Could the menu label supports direct input of interpolation e.g. {{'menu.home.label' | translate}} (as innerHtml is a good idea). I am using ngx-translate to translate my page but could not find elegant way to translate the menu label. Could anybody suggest any work-around?

[dima716]

@cagataycivici Are you going to implement this feature?
I really need to use html content in label.

[yelhouti]

Need this two, please @cagataycivici any guess when it will be available?

[begogna]

Could the menu label supports direct input of interpolation e.g. {{'menu.home.label' | translate}} (as innerHtml is a good idea). I am using ngx-translate to translate my page but could not find elegant way to translate the menu label. Could anybody suggest any work-around?

I also need this !

[thenninger]

Could also benefit from this please, thanks.

[cagataycivici]

For 10.0.1, we'll either to it via new escape property which uses innerHtml when set to false. Default should be true for backward compatibility. One alternative could be templating as well, either way we'll tackle it in 10.0.1.

[cagataycivici]

This is now supported by the new escape property.

export class MenuDemo {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [{
            label: '<h2>File</h2>',
            escape: false,
            //...
        }
    }
}