Angular *ngIf<mat-slide-toggle></mat-slide-toggle>

Question

how to open the <mat-slide-toggle> if the currentFight is in bet-open and on-going and how to close the <mat-slide-toggle> if the currentFight is in on-standby and last-call ?

<label class="mb-10 mr-15">Close </label> 
    <mat-slide-toggle [checked]="isSlideChecked"></mat-slide-toggle>
<label class="mb-10 ml-15">Open </label>

this is my type script

import { Component, OnInit, Input } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
@Component({
  selector: 'app-odds-editor',
  templateUrl: './odds-editor.component.html',
  styleUrls: ['./odds-editor.component.scss']
})
export class OddsEditorComponent implements OnInit {
  @Input() currentFight: any;
  constructor() { }
  public isSlideChecked: boolean = false;
  ngOnInit() {
  }
  toggleChanges($event: MatSlideToggleChange) {
    if(this.currentFight){
      if(this.currentFight == 'on-standby'){
        this.isSlideChecked = $event.checked;
      }
      else if(this.currentFight == 'bet-open'){
        this.isSlideChecked = $event.checked;
      }
      else if(this.currentFight == 'last-call'){
        this.isSlideChecked = $event.checked;
      }
      else if(this.currentFight == 'on-going'){
        this.isSlideChecked = $event.checked;
      }
    // if currentFight
    // this.isSlideChecked = $event.checked;
  }
}
}

Answer 1

<mat-slide-toggle> should have a [checked] input property that you can bind to.

This should show the toggle as selected.

<mat-slide-toggle [checked]="true"></mat-slide-toggle>

This should show the toggle as not selected.

<mat-slide-toggle [checked]="false"></mat-slide-toggle>

You can replace value of the [checked] property with a variable from your component if you need to be able to select/de-select the slider from your code.

The official documentation: https://material.angular.io/components/slide-toggle/examples

Updated:

Try changing your html to

<label class="mb-10 mr-15">Close </label> 
    <mat-slide-toggle [checked]="isSlideChecked()"></mat-slide-toggle>
<label class="mb-10 ml-15">Open </label>

and your ts to

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-odds-editor',
  templateUrl: './odds-editor.component.html',
  styleUrls: ['./odds-editor.component.scss']
})
export class OddsEditorComponent implements OnInit {
  @Input() currentFight: any;
  constructor() { }
  ngOnInit() {
  }
  isSlideChecked() {
    if(this.currentFight == 'on-standby' || this.currentFight == 'bet-open'){
      return true;
    }
    return false;
  }
}