Conditionally toggle class in angular 2 - html

Question

I need to toggle a class "active" on in app-component whenever a button in "app-header" component is clicked.
Here is my app-component.html,
<div class="off-canvas">
<app-header><app-header>
<app-home></app-home>
<app-footer></app-footer>
</div>
app-header.html
<div>
<!--Some code-->
<button></button>
</div>
How can I do this using only angular since the div and button are in 2 different components????please help I am new to angular!!!

Answer 1

You can bind your object to the [ngClass] directive:
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
To share data between components, see this answer: https://stackoverflow.com/a/45371025/1791913

Answer 2

You can use EventEmitter.
app-header.html
<div>
<!--Some code-->
<button (click)="emitClick()"></button>
</div>
app-header.ts
#Output() _clickEvent:EventEmitter<any>=new EventEmitter();
constructor(){
}
ngOnInit(){
}
emitClick($event){
this.clickEvent.emit()
}
app-component.html
<div class="off-canvas" [ngClass]="{'someClassName':active}">
<app-header (_clickEvent)="toggleActive($event)"><app-header>
<app-home></app-home>
<app-footer></app-footer>
</div>
app-component.ts
active:boolean=false;
constructor(){
}
ngOnInit(){
}
toggleActive($event){
// Insert click event handling here
}
You should declare active variable in your app-component.ts and initialized it to Boolean. Every click will cause the active to toggle between true and false.
A class named 'someClassName' will be added by the ngClass whenever the 'active' variable it true.

Answer 3

You can create a common service and store a variable as public, example:
#Injectable()
export class DataService{
foo:string;
}
Then use variable in the both components as a shared variable, example:
#Component({...})
export class FooComponent{
constructor(private dataService:DataService){}
foo():void{
console.log(this.dataService.foo);
}
}