I have been working on a really heavy angular application. I am running through an optimization process and then got a doubt regarding angular class binding.

Let's say we have parent and child elements, Where we do some conditional styling. By default the child element should be backgound-color: blue. But when the parent has expanded class, The child should become background-color: red.

NOTE: The expanded class applies based on a condition.

We can do it in 2 methods.

Method 1

Template

<parent class="parent" [class.expanded]="isExpanded">
     <child class="child"></child>
</parent>

SCSS

.parent {
    .child {
        background-color: blue;
    }

    &.expanded {
        .child {
            background-color: red;
        }
    }
}

Method 2

Assume we have some global common classes bg-blue and bg-red.

Template

<parent class="parent" [class.expanded]="isExpanded">
     <child class="bg-blue" [class.bg-red]="isExpanded"></child>
</parent>

In the above method, we had to add additional Class Binding to the child.

The Question is,

Which method is efficient in terms of performance to use across the larger angular applications with minimal DOM manipulation?