Click event on child Component Angular 13 to remove class in grand-parent component

Hello I have 3 components in Angular 13:

Child : Burger-menu

Parent : Header

Grand-Parent : app.component.html

I have a close burger menu button in the burger-menu component. when I click on it, I want to remove a class that is on the header. The header is located in the grandparent component. Here is my code :

Grand-parent component:

app.component.html

<header app-header class="headerMain"
            [class]="headerClasses"
            (addClassEvent)="receiveClass('--openned')">
    </header>

app.component.ts

import {Component, ViewEncapsulation} from '@angular/core';
import {BurgerMenuComponent} from "./burger-menu/burger-menu.component";
export {BurgerMenuComponent} from './burger-menu/burger-menu.component';


@Component({
selector: '[app-root]',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
title = 'sweet4U';
headerClasses = "headerMain";

receiveClass($event: string) {
 this.headerClasses = $event;
}
removeClassHeader($event: string) {
 this.headerClasses = $event;
}
}

Parent component :

header.component.html

<button type="button" aria-label="ouverture menu burger" class="btn-burger btn" (click)="onClickButtonToggle()" >
  <img src="../../assets/images/svg/menu-burger.svg" alt="">
</button>
<nav app-burger-menu
     [class]="burgerClasses"
     (closeBurgerMenu)="receiveClass('menuBurger')" >

</nav>
<a [routerLink]="['/home']">
  <figure class="headerMain__logo">
    <img [src]="logoImg" alt="logo de la crèche sweet4u" loading="lazy">
  </figure>
</a>
<nav app-menu-main class="menuMain"></nav>

header.component.ts

import {Component, OnInit, Output, EventEmitter, ViewEncapsulation} from '@angular/core'
import {BurgerMenuComponent} from "../burger-menu/burger-menu.component";
export {BurgerMenuComponent} from '../burger-menu/burger-menu.component';

@Component({
  selector: '[app-header]',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation:ViewEncapsulation.None ,
})

export class HeaderComponent implements OnInit {

  logoImg = "assets/images/svg/logo-site-Sweet4U.svg";
  headerClasses = "headerMain";
  burgerClasses = "menuBurger";

  @Output() addClassEvent= new EventEmitter<string>();

  constructor () { }
  onClickButtonToggle(): void{
    this.burgerClasses ="menuBurger --openned";
    this.addClassEvent.emit('headerMain --openned')
  }

  receiveClass($event: string) {
    this.burgerClasses = $event;
  }

  ngOnInit(): void {
  }
  
}

Child Component :

burger-menu.component.html

<button type="button" id="closeMenuburger" aria-label="fermeture menu burger" class="btn-burger btn" (click)="onClickButtonClose()" >
  <img src="../../assets/images/svg/close.svg" alt="">
</button>

burger-menu.component.ts

import {Component, EventEmitter, OnInit, Output, ViewEncapsulation} from '@angular/core'
import {HeaderComponent} from "../header/header.component";
export {HeaderComponent} from "../header/header.component";
import {AppComponent} from "../app.component";
export  {AppComponent} from "../app.component";



@Component({
  selector: '[app-burger-menu]',
  templateUrl: './burger-menu.component.html',
  styleUrls: ['./burger-menu.component.scss'],
  encapsulation:ViewEncapsulation.None ,
})


export class BurgerMenuComponent implements OnInit {

  class: string ="";

  @Output() closeBurgerMenu = new EventEmitter<string>();
  @Output() resizeHeighHeaderNavBurger = new EventEmitter<string>();

  onClickButtonClose() {
    this.closeBurgerMenu.emit(this.class);
    this.resizeHeighHeaderNavBurger.emit(this.class);
  }
  
  constructor() { }

  ngOnInit(): void {
  }

}

When I click on the open menu button (in the parent component), I have the –openned class added to the header (grand parent component). Now where I have a problem is to remove this class when I click on the burger close button (child component)

Any tips to help me solve this problem?

Thank you in advance

Answer

You’re not taking advantage of the emitted value from header component. You’re emitting this.addClassEvent.emit('headerMain --openned') and then in the app component statically passing a string to the function (addClassEvent)="receiveClass('--openned')".

Change it to (addClassEvent)="receiveClass($event)" and emit an empty string on burger close in header component like this

receiveClass($event: string) {
    this.burgerClasses = $event;
    this.addClassEvent.emit('')
}