Conditionally toggle class in angular 2

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!!!

Solution 1

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.

Solution 2

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

Solution 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);
    }
}

Comments

[Laoujin]

You are missing some quotes, your current example is not valid Angular template syntax.

[Mr.Gaja]

Is there a way to listen to this event <app-header (_clickEvent)=active=!active><app-header> in app-component.ts???

[Gili Yaniv]

@Laoujin Sorry Iv'e added the quotes.

[Gili Yaniv]

@Mr.Gaja Yes you can, Iv'e edit my answer and added the toggleActive() function. Hope it helps..

[Toby Speight]

While this might be a valuable hint to solve the problem, a good answer also demonstrates the solution. Please edit to provide example code to show what you mean. Alternatively, consider writing this as a comment instead.

[Mr.Gaja]

@Output() must be added to app-header.ts , @Output() _clickEvent:EventEmitter<any>=new EventEmitter();