javascriptangularclickangular13

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


I have 3 components in Angular 13:

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('--opened')">
</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 --opened";
    this.addClassEvent.emit('headerMain --opened')
  }

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


Solution

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

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