Добавить класс в родительский div, когда в Angular 8 выбрана радиокнопка

Question

Недолго началось с Angular.

Поэтому мне нужно добавить класс в родительский div, когда в Angular выбрана радиокнопка. Меня убеждают, что это возможно с помощью [ngClass] и, возможно, даже с [ngSelected], но мне не повезло с этим в последние несколько дней.

Мне кажется, что я ищу класс, который нужно добавить в div, когда выбрана радиокнопка, я видел статичные примеры этого, но ничего динамического.

<div id="one">
<id="two">
<input type="radio" /><label>Text 1</label>
</div>
</div>

, когдаЕсли выбран переключатель, класс будет добавлен в div с id = "one". Это кажется довольно простой вещью, но я совсем не люблю этого.

Спасибо!

Answer 1

Вы можете сделать что-то вроде этого

<div [className]="condition ? 'example-class' : 'other-class'"></div>

Для получения более подробной информации перейдите по этой ссылке: Связывание классов в угловых

Answer 2

Прежде всего, сделайте id=one до class=one (сделайте one классом). Затем используйте [clas.classname]="condition"

<div class="one" [class.myClass]="isChecked">
  <div id="two">
     <input id="radio" type="radio" (change)="checked($event)">
  </div>
</div>

И, наконец, в файле .ts, isChecked = checkbox.checked;

См. Это рабочая демонстрация

Answer 3

В вашем компоненте

selected: string = '';

В вашем html

<div id="one" [ngClass]="{'myClass': selected == 'one'}">
    <div id="two">
        <input type="radio" value="one" [(ngModel)]="selected" /><label>Text 1</label>
    </div>
</div>

С уважением

Answer 4

Попробуйте это

<div id="one" [class.newClass]="radioBtn">
    <div id="two" >
        <input type="radio" [ngModel]="radioBtn" /><label>Text 1</label>
    </div>
</div>

Answer 5

Я могу сделать так:

addClass = false;

radioChanage(event) {
 this.addClass = true;
 }

в шаблоне.

<div id="one" [ngClass]="{'className' : addClass}">
<id="two">
<input type="radio" (change)="radioChanage($event)" /><label>Text 1</label>
</div>
</div>