How to change the class of the parent element with different forms with angular2+ or css? - css

Question

I have a list of elements with a header, body and a checkbox to display the body, Like accordion:
<form class="search-box" [ngClass]="{'classname' : condition}">
<input
(click)="addClasstoBody"
type="checkbox"
name="showBody"
/>
<header>
<span class="body">
Body
</span>
</header> </div>
<div class="search-box" [ngClass]="{'classname' : condition}">
<input
(click)="addClasstoBody"
type="checkbox"
name="showBody"
/>
<header>
<span class="body">
Body
</span>
</header></form>
With the easy way of setting on true by add the class to all the components.
Can I use something like form.checkbox.checked?

Answer 1

i edited the answer
create elementRef and bind to your HTML element
then pass the elementRef onClick for further manipulate
edit your component.ts
...
#ViewChild('container1') container1: ElementRef;
#ViewChild('container2') container2: ElementRef;
....
addClasstoBody(containerModel: HTMLElement, event){
var targetContainer = event.target;
var isChecked = targetContainer.checked;
console.dir(isChecked)
console.dir(containerModel)
console.dir(event)
if(isChecked){
containerModel.classList.add("show");
}else{
containerModel.classList.remove("show");
}
}
edit your component.html
<form class="search-box">
<div [ngClass]="{'classname' : true}" #container1>
<input
(click)="addClasstoBody(container1, $event)"
type="checkbox"
name="showBody"
[(ngModel)]="container1.isCheck"
>
<header>
<span class="body">
Body1
</span>
</header>
</div>
<div class="search-box" [ngClass]="{'classname' : true}" #container2>
<input
(click)="addClasstoBody(container2, $event)"
type="checkbox"
name="showBody"
[(ngModel)]="container2.isCheck"
>
<header>
<span class="body">
Body2
</span>
</header>
</div>
</form>
you may also did all in the html, remove the addClasstoBody function but edit your container as below
<div [ngClass]="{'classname' : container1.isCheck}" #container1>