Angular 6 navigering: Responsive menu – en sidebar

I app.module.ts


… og i imports sektionen af samme fil:


I dokumentationen er brugen af modulet tydeligt forklaret, men som ny bruger af Angular 6, havde jeg lidt udfordringer med at finde ud af, hvordan man åbner og lukker det uden for det komponent hvor det er tilføjet.

Jeg løste det ved at oprette en service som andre komponenter kan kalde. Sidebar komponentet lytter så til denne service og sørger for at åbne og lukke menuen.

Min service ser således ud:

i app.module.ts:


og samme fil i providers:

I det komponent der skal kunne åbne og lukke menuen:

og i den tilhørende klasse opretter vi en lille funktion der kommunikerer med vores service. Denne funktion kaldes i en click-event på et html element i samme komponent:

…og i det komponent der indeholder vores sidebar skal vores service også importeres som vist herover, og derudover sætter vi den til at lytte til vores service: