I have one root component. One root component has 3 child component:
In PressComponent I have a button with (click)="changeColors())".
In CalcComponent I have a box with blue background.
In PianoComponent I have a box with red background.
How can I do this:
When I click on button in PressComponent then:
In CalcComponent box will get the class .calc-box-green.
In PianoComponent box will get the class .piano-box-yellow.
You can use Output/Input like described here . But the service approach in the Abdul Rafay's comment can be most suited to your needs. It's up to you.
Forked plunker of Output/Input proposal of solution here
I added an @Output to the PressComponent, so it can emit the fact that the button has been pressed to the AppComponent.
// in PressComponent
@Output() pressed: EventEmitter<boolean> = new EventEmitter();
changeColors() {
this.pressed.emit(true);
}
// in App Template
<app-press (pressed)=onPressed($event)></app-press>
// in AppComponent
onPressed = (pressed) => {
this.pressed = pressed;
}
Then the AppComponent forward the pressed-status to CalcComponent and PianoComponent via @Input and use the "inputed" boolean to conditionally apply css class
// in pianoComponent
@Input() pressed: boolean;
// in template
<div class="piano-box" [class.piano-box-yellow]="pressed"></div>
