Unable to initialize default values when using ngDefaultControl in Angular

Question

I use a child component, the child component contains the ngDefaultControl property.

el-input.component.ts:

@Component({
  selector: 'el-input',
  template: ` <input type="text" /> `,
})
export class ElInput {}

I use it like this：

@Component({
  selector: 'app-home',
  template: `
    <el-input ngDefaultControl [(ngModel)]="name"></el-input>
    <p>{{ name }}</p>
    <button (click)="onClick()">Change Name</button>
  `,
})
export class HomeComponent {
  name: string = 'Tom';

  onClick() {
    this.name = 'Jack';
  }
}

I set the initial value of name to Tom, but el-input doesn't show it. And I click the button and nothing happens

after clicked the button:

how should i fix it