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

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]="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"  (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 >
    <img [src]="logoImg" alt="logo de la crèche sweet4u" loading="lazy">
  </figure>
</a>
<nav app-menu-main ></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"  (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

CodePudding user response：

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('')
}