动态更改角度6中的复选框的工具提示文本

时间:2018-08-28 08:17:03

标签: html angular typescript angular6

我有此代码,无论复选框是否处于活动状态,我都需要将文本传递至工具提示,因此将显示例如。复选框处于活动状态时为“活动”,否则为“无效”。该怎么做?

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

1 个答案:

答案 0 :(得分: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
    }
  }