"Click" does not work at the angle

Question

Follow the codes. Despite hiding the menu, it does not open again with the "click" function in Nav-Burger

menu.:

section class="hero outer is-primary is-fullheight animated slideInLeft" [ngClass]="{'is-hidden' : !menu.opened}">

menu.service.ts:

@Injectable()
export class MenuService {
  opened: boolean;

  constructor() { }
  open (){
    this.opened = true;
  }

}

header.componentts.:

@Component({
  providers: [MenuService],
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor(public menu:MenuService) { 

html header:

 <div class="navbar-burger burger" (click)="menu.open()">
      <span></span>
      <span></span>
      <span></span>
    </div>

Answer 1

You have to have the function in the Component

header.componentts.

@Component({
  providers: [MenuService],
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor(public menu:MenuService) { }

 openMenu(){
   this.menu.open()
  }
}

And in html:

 <div class="navbar-burger burger" (click)="openMenu()">

Answer 2

In this case, you will have to use @Output()

      @Output() menu = new EventEmitter()


  emitAddEvent(){
    this.menu.emit(this.menuItem)
  }