Как обновить динамический текст, используя innerHtml с Angular 5 и Material Design

Question

У меня есть список с динамическими данными, и я хочу обновить определенный текст, когда пользователь нажимает кнопку:

<mat-list> 
    <mat-list-item *ngFor="let id of ids">
      <mat-radio-group>
        <mat-radio-button name="car" value="honda" id="honda{{id}}" (change)="onChangeCar(id,honda)">Honda</mat-radio-button>
        <mat-radio-button name="car" value="toyota" id="toyota{{id}}" (change)="onChangeCar(id,toyota)">Toyota</mat-radio-button>
      </mat-radio-group>
   </mat-list-item>
<span [id]="id">Text to update</span>
</mat-list>

Как динамически обновить текст в угловом режиме?Я знаю, как это сделать по старинке, но это не рекомендуется:

onChangeCar(id) {
  (<HTMLInputElement>document.getElementById(id)).innerHTML = "new text at a 
  specific Id";
}

Answer 1

заменить

<span [id]="id">Text to update</span> 

с

<span >{{newVal}}</span>

и в вашем компоненте создайте переменную для привязки с newVal