html - HTML element with # to pug-template

Question

I've got a piece of code with 2 angular material radio buttons. Both of them have the #attribute/element (I'm not certain what it's called) within them. How can I convert them into pug so that the attribute/element with the # works? Here is sample code which has the #attribute/element in it that I'd like to make work in pug:

<mat-radio-button #firstRadio name="selection" value="one" (change)="aMethodCall();" color="primary" [checked]="oneSelected"> ...
</mat-radio-button>
<mat-radio-button #secondRadio name="selection" value="two"  (change)="aMethodCall();" color="primary" [checked]= "!oneSelected"> ...
</mat-radio-button>

I've tried to turn it to pug:

mat-radio-button( #firstRadio, name="selection", value="one", (change)="aMethodCall()", color="primary", [checked]="oneSelected") ...
mat-radio-button( #secondRadio, name="selection", value="two", (change)="aMethodCall()", color="primary", [checked]="!oneSelected") ...

But the #elements are not registering in pug. Any help with the syntax to get them to work is appreciated. Ps. if you know the name of the #element I'd like to know it. Thanks.

标签： htmlangularangular-materialpug

Answer 1

To answer my own question: getting the html with the # id tag to work 100% on pug, I used the html2jade which Sergi Nadal suggested. The resulting pug is then:

mat-radio-button(#firstradio='', name='selection', value='one', (change)='aMethodCall();', color='primary', [checked]='oneSelected')
  | ...
mat-radio-button(#secondradio='', name='selection', value='two', (change)='aMethodCall();', color='primary', [checked]='!oneSelected')
  | ...

So to bypass the # from working as a interpolation marker in pug, I can put it as an attribute with an empty value into the pug template to get it working.