Bootstrap 4 - переключение между светлым и темным режимом с помощью флажка

Question

Я пытаюсь подключить логическое значение флажка к классу таблицы.

поэтому, если флажок установлен => включить темный режим.

Я пробовал следующее:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped" [ngClass]="{'table-dark': darkMode == 'true'}">
  <thead class="thead-light">
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" [checked]="darkMode" ([ngModel])="darkMode=(darkMode ? false : true)" id="customSwitch">
  <label class="custom-control-label" for="customSwitch">Toggle Dark Mode</label>
</div>

Как связать логическое значение из флажка со встроенной угловой переменной и применить класс css?

Answer 1

Используйте директиву ngModel, затем поместите шаблон ref во входные данные и назначьте директиву ngModel и используйте этот шаблон ref для динамического связывания класса

<table class="table table-striped" [ngClass]="{'table-dark': ref.value == true}">
  <thead class="thead-light">
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" #ref="ngModel" ngModel id="customSwitch" name="chec">  
  <label class="custom-control-label" for="customSwitch">Toggle Dark Mode</label>
</div>

https://stackblitz.com/edit/angular-nkthpk

Для получения дополнительной информацииоб угловой форме: https://angular.io/guide/forms