css - How add class to parent in angular application?

Question

I have next HTML

// This is parent
<div class="some-class">
     // This is child
     <totalizer</totalizer>
</div>

How can I change parents style ( add new class ) from child?

Answer 1

You can use an EventEmitter @Output() property that signals the parent component to add/remove a css class dynamically using ngClass.

In your child totalizer component, define,

@Output() cssRefresh = new EventEmitter<boolean>();

//when you need to add/remove css emit an event out to the parent like this 
// (preferably in a method in this component),

this.cssRefresh.emit(true); // or 'false' depending on add/remove

Then in the parent html modify this,

<div class="some-class" [ngClass]="{ 'dynamicClass1 dynamicClass2 dynamicClass3': addCss}">
     // This is child
     <totalizer (cssRefresh)=refreshCss($event)></totalizer>
</div>

Inside your parent component add this method and property,

addCss = false; // set 'initial state' based on your needs

refreshCss(add: boolean) {
 this.addCss = add ? true : false;
}

More on ngClass here.