How to keep multiple child components in separate divs that looks like they are in the same div

I have two child components as below:

<div [ngClass]="(first-child-flag && second-child-flag)?'classA':'classB'">
<app-first-child *ngFor="let child of firstChildComponent">
</app-first-child>

<app-second-child *ngFor="let child of secondChildComponent">
</app-second-child>
</div>



Based on this code, only if both children have a true flag, classA is assigned to the <div>. But what I need is that if one of the children has true flag its div gets classA and the same <div> gets classB for the other child, which has false flag. Is there any trick to achieve it? AFAIK it is impossible to give a div two classes at the same time (if possible please tell me), but maybe something like putting two exactly the same <div> at top of each other that are rendered like one but are controlled separately solves the problem!?

Continue reading...