Динамически изменяемый текст всплывающей подсказки флажка в угловых 6

Question

У меня есть этот код, и мне нужно передать текст во всплывающую подсказку, независимо от того, активен ли флажок или нет, поэтому он будет отображаться, например. «активный», когда флажок активен и «отключен», когда нет. Как это сделать?

<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
    }
  }