One of the challenges I'm facing is with my header component. It has a function that toggles a class on click, and it works perfectly within the header component. However, I now want to extend this functionality to my nav component in order to add classes based on this event.
The question at hand:
How can I access these variables inside the nav component?
The behavior I desire:
What I aim for is the ability to include CSS classes when the toggleMenu is clicked.
The code snippet:
Header Component:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
private showOpened : boolean;
constructor() {
}
ngOnInit() {
this.showOpened = false;
}
toggleMenu() {
this.showOpened = !this.showOpened;;
}
}
Header HTML:
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="logo">---</h1>
<input type="checkbox" class="checkbox-menu" id="menu-toogle">
<label for="menu-toogle" class="menu-toogle" (click)="toggleMenu()"></label>
<div class="bar" [class.animate]="showOpened"></div>
<span class="icon-search"></span>
</header>
</div>
Nav Component
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Nav HTML
<nav [class.open-menu]="showOpened"></nav>