File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-hamburger-menu |
| templateUrl |
./hamburger-menu.component.html |
Accessors
|
isExpanded
|
getisExpanded()
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Observable } from 'rxjs';
import { HamburgerMenuService } from './hamburger-menu.service';
@Component({
selector: 'cx-hamburger-menu',
templateUrl: './hamburger-menu.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HamburgerMenuComponent {
constructor(private hamburgerMenuService: HamburgerMenuService) {}
toggle(): void {
this.hamburgerMenuService.toggle();
}
get isExpanded(): Observable<boolean> {
return this.hamburgerMenuService.isExpanded;
}
}
<button
class="cx-hamburger"
type="button"
(click)="toggle()"
[class.is-active]="isExpanded | async"
[attr.aria-expanded]="isExpanded | async"
[attr.aria-label]="'common.menu' | cxTranslate"
aria-controls="header-account-container, header-categories-container, header-locale-container"
>
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
Legend
Html element with directive