Dynamically changing tooltip text of checkbox in angular 6

user_7338630 0
Viewed 6964

I have this code and I need to pass the text to the tooltip whether checkbox is active or not, so this will display eg. "active" when checkbox is active and "disactive" when not. How to do that?

<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>
angular6 angular typescript html
1 Answers

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