title: How to update dynamic text using innerHtml with Angular 5 and Material Design
body: <p>I have a list with dynamic data and I want to update a specific text when the user clicks on a button :</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-list&gt; 
      &lt;mat-list-item *ngFor="let id of ids"&gt;
        &lt;mat-radio-group&gt;
          &lt;mat-radio-button name="car" value="honda" id="honda{{id}}" (change)="onChangeCar(id,honda)"&gt;Honda&lt;/mat-radio-button&gt;
          &lt;mat-radio-button name="car" value="toyota" id="toyota{{id}}" (change)="onChangeCar(id,toyota)"&gt;Toyota&lt;/mat-radio-button&gt;
        &lt;/mat-radio-group&gt;
     &lt;/mat-list-item&gt;
  &lt;span [id]="id"&gt;Text to update&lt;/span&gt;
  &lt;/mat-list&gt;
  </code></pre>
  
  <p>How to update the text dynamically in an Angular way? I know how to do it with the old fashion way but it's not suggested :</p>
  
  <pre class="lang-ts prettyprint-override"><code>onChangeCar(id) {
    (&lt;HTMLInputElement&gt;document.getElementById(id)).innerHTML = "new text at a 
    specific Id";
  }
  </code></pre>