Angular missing id attribute in DOM despite displaying "ng-reflect-id"-CodePudding

What could cause Angular to not add the id attribute to my component in the DOM.

TS:

export class InputComponent extends BaseComponent {
    @Input() public id: string = '';
    ...
}

HTML :

    <lib-input
        id="{{ vo.id }}-username"
        label="Username"
        i18n-label
        [control]="vo.loginForm.username"
        [autofocus]="true"
    ></lib-input>

DOM :

<lib-input label="Username" 
   ng-reflect-label="Username" 
   ng-reflect-id="lib-ui-login-username" 
   ng-reflect-control="[object Object]" 
   ng-reflect-autofocus="true">

Stackblitz

CodePudding user response：

The string interpolation is at fault. Without {{...}} the id appears as expected in the DOM.

I'm very disappointed that Angular doesn't handle it.

Edit: Actually HostBinding is a nice workaround.

export class MyInput {
  @Input()
  @HostBinding('attr.id')
  id: string;
}