在角度 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
    }
  }