Jade / Pug with Angular 2 - how to resolve conflict with # syntax?

Question

Jade injection

div(#menu class="ui dropdown icon item")

Html output

<div #menu="#menu" class="ui dropdown icon item">

#menu = "# menu" is incorrect, I expected only #menu to exit .

<div #menu class="ui dropdown icon item">

---

Problem:

Angular template reference variables conflict with the jade # idname syntax .

Version Information:

• Jade 1.11.0
• Angular 2 rc4

Answer 1

You can usually fix this by explicitly pointing the Jade compiler to HTML5 type:

doctype html
div(#menu class="ui dropdown icon item")

Answer 2

according to the documentation

, #, canonical, ref-. , , #phone ref-phone.

<!-- phone refers to the input element; pass its 'value' to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<!-- fax refers to the input element; pass its 'value' to an event handler -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

ref-menu #menu

BTW @dfsq doctype html:

div(#menu class="ui dropdown icon item")

(#menu class):

div(class="ui dropdown icon item" 
        #menu [routerLinkActive]="['router-link-active']" 
        [routerLinkActiveOptions]="{exact:true}"
)

, :

div(class="ui dropdown icon item", 
    #menu,
    [routerLinkActive]="['router-link-active']",
    [routerLinkActiveOptions]="{exact:true}"
)

angular -way:

, , , ([],()), (bind-, on-, bindon -).