角度：单击时更改布尔值

Question

So, I have a toggle button and a function. I want that when I click on my button, my boolean value goes from TRUE to FALSE and from FALSE to TRUE . And then this value is send to my function.

Below you can find the html and ts:

 <mat-slide-toggle id='stop-camera' (change)='stopCamera($event)'></mat-slide-toggle>

.

  public stopCamera($event: boolean) : void{
    let num : 0;
    $event =! $event;
    if($event===true){
      console.log('Hi ' +num);
    }else{
      console.log('False');
    }
  }

The problem here is that my console only returns me falses...

I know it's something really basic and even simple, but because it's so simple and basic I can't find out how to do it... So I would like to get some help please . I thank in advance anyone who will take the time to help me.

PS: I'm on Angular 9 right now.

Answer 1

1.component.html

 <mat-slide-toggle id='stop-camera' (change)='stopCamera($event)'></mat-slide-toggle>

2.Mat-Slide toggle will give you the events when toggle changes no need to put ! condition

public stopCamera(event:any) : void{
    let num : 0;
    if(event.checked){
      console.log('Hi' +num);
    }else{
      console.log('False');
    }
  }

Answer 2

You might want to define a variable/state that will update on button click

toggleState = true

(click) = 'toggleState()'

public toggleState(){
  this.toggleState = !this.toggleState
}

You can access the variable in any function you want in your component.

Answer 3

One possible way is to use two-way data binding with NgModel . Your template:

<mat-slide-toggle [(ngModel)]="checked" (ngModelChange)="toggle()">
  Toggle
</mat-slide-toggle>

Your component:

checked = true;

toggle(): void {
  console.log(this.checked);
  // do more stuff
}