Modifier dynamiquement le texte de l'infobulle d'une case à cocher dans angular 6

Question

J'ai ce code et j'ai besoin de passer le texte à l'infobulle si la case à cocher est active ou non, ainsi cela affichera par exemple "actif" lorsque la case à cocher est active et "inactif" lorsqu'elle ne l'est pas. Comment faire ?

<div class="wifi__switcher switcher">
    <input type="checkbox" [id]="wifiIdentifier" class="input switcher--input js-checkbox"  [checked]="activated" (click)="saveState()">
    <label class="switcher--label" [for]="wifiIdentifier"  matTooltipPosition="above" matTooltip="(tooltipMessageAccordingToCheckboxState)">Toggle</label>
    <!--</div>-->
</div>

Answer 1

DEMO

HTML :

<div class="wifi__switcher switcher">
    <input type="checkbox"  class="input switcher--input js-checkbox" [checked]="activated" (change)="saveState($event)">
  {{activated}}
    <label  matTooltipPosition="above" matTooltip="{{activated?'activated': 'not active'}}">Toggle</label>

</div>

TS :

activated: boolean = false;

  saveState(ev){
    if(ev.target.checked){
      this.activated = true
    } else{
      this.activated = false
    }
  }