Переключить два класса, используя mat-slide-toggle

Question

Переключение двух классов d-block и d-none с помощью переключателя mat-slide.Когда флажок включен, мне нужно изменить класс d-none на d-block и d-block на d-none

<mat-slide-toggle >
  View All Statuses
</mat-slide-toggle>

<div class="row">
    <div class="col-12 d-block">
      <svg id="bar-chart" width="550" height="300"></svg>
    </div>
    <div class="col-12 d-none">
      <svg id="stacked-bar-chart" width="550" height="300"></svg>
    </div>
</div>

Answer 1

Ниже кода с использованием директивы Angular ngClass

HTML:

<mat-slide-toggle [(ngModel)]="checked">
  View All Statuses
</mat-slide-toggle>

<div class="row">
    <div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
      <svg id="bar-chart" width="550" height="300"></svg>Hello
    </div>
    <div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
      <svg id="stacked-bar-chart" width="550" height="300"></svg>World
    </div>
</div>

CSS:

.d-block {
    display: block;
}

.d-none {
    display: none;
}

Answer 2

попробуйте это будет работать, в противном случае вы можете использовать [ngClass]="bool ? 'd-block' : 'd-none'"

$("#toggleclick").click(function () {
    if($(".d-block").hasClass("hide"))
    {
      $(".d-block").removeClass("hide");
      $(".d-none").addClass("hide");
    }
    else if($(".d-none").hasClass("hide")) {
      $(".d-none").removeClass("hide");
      $(".d-block").addClass("hide");
    }
})

.d-block{
  background:#ff0;
}

.d-none{
background:#0ff;
}

.hide{
  display:none;
}

mat-slide-toggle{
cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mat-slide-toggle id="toggleclick">
  View All Statuses
</mat-slide-toggle>

<div class="row">
    <div class="col-12 d-block">
      <svg id="bar-chart" width="550" height="300"></svg>
      D-Block
    </div>
    <div class="col-12 d-none hide">
      <svg id="stacked-bar-chart" width="550" height="300"></svg>
      D-None
    </div>
</div>