How to pass variable value from component to Angular2 component?

Question

Angular

Such a case: There is a menu component

@Component({
    selector: 'menu',
    template: '<div [ngClass]="{open : menu_stat}">menu elements...</div>',
})
export class MenuComponent {
   menu_stat : boolean = false;
}

there is a login panel component

@Component({
    selector: 'login',
    template: `<button (click)="toggleMenu()">open<button>`,
})
export class LoginComponent {
   menu:boolean = false;
   toggleMenu(){
      this.menu = !this.menu;
   }
}

It is necessary that when I click on the button in the login panel, I would display a menu, i.e. so that the menu_stat variable in the menu component becomes true
If possible, then on the fingers, because I rummaged through the docks, and I didn’t really find a normal solution

Answer 1

From an architectural point of view, it would be correct to create a service with an event. This service is declared in the system and both components receive it in the constructor using dependency injection. After that, it LoginComponentwill be able to trigger an event, and MenuComponent- subscribe to it and process changes.