Angular 5 how to add ngClass of component's elements from parent HTML

Question

My project has one angular component nested inside a main html file. It's rendered using angular selector.

and component1 has divs inside which I'm trying to dynamically add & remove their CSS classes using ngClass.

But the button that will trigger that change is nested in the main HTML, not inside the component.

I tried EventEmitter from main html but I learned EventEmitter doesn't work for parent to child element interaction. It works only for child element (component) to parent interaction. So I think I have to create a service provider which transfers button's function to component divs from main html. But I have no idea how..

Here's my main html:

<component1></component>

<button (click)="addStyles()"></button>
<button (click)="removeStyles()"></button>

and here's my component HTML file:

<div [ngClass]="exampleDiv01"></div>
<div [ngClass]="exampleDiv02"></div>

and here's my component SCSS file:

style-added {
 background: red;
width: 400px;
height: 400px;
 }

style-removed {
 background: white;
width: 200px;
height: 200px;
}

How can I make my main HTML's two buttons to dynamically add style-added, style-removed classes to component's exampleDiv01 using provider?

Any opinion would be appreciated!

Thanks,

Answer 1

You could add the same methods to the child component. Then the version of the method in the parent component simply calls the method in the child component.

You can call any method in the child component using ViewChild.You can pass ViewChild the type of your child component.

Parent

@ViewChild(ChildComponent) childComponent: ChildComponent;

addStyles(): void {
   this.childComponent.addStyles();
}

Child

addStyle(): void {
   // Whatever code you needed to do here
}