Angular 6 navigering: Responsive menu – en sidebar

(Last Updated On: 27. juni 2018)

$ npm install --save ng-sidebar

1	$ npm install --save ng-sidebar

I app.module.ts

import { SidebarModule } from 'ng-sidebar';

1	import { SidebarModule } from 'ng-sidebar';

… og i imports sektionen af samme fil:

imports: [
  BrowserModule,
  ...
  SidebarModule.forRoot()
]

imports: [

BrowserModule,

...

SidebarModule.forRoot()

]

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:

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable({providedIn: 'root'})
export class MainMenuService {
  isOpen = false;

  @Output() change:EventEmitter = new EventEmitter();

  toggle() {
    console.log('toggle in service called');
    this.isOpen = !this.isOpen;
    //Alert subscribers about the change
    console.log('passing '+this.isOpen+' to subscriber')
    this.change.emit(this.isOpen);
  }
}

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable({providedIn: 'root'})

export class MainMenuService {

isOpen = false;

@Output() change:EventEmitter = new EventEmitter();

toggle() {

console.log('toggle in service called');

this.isOpen = !this.isOpen;

//Alert subscribers about the change

console.log('passing '+this.isOpen+' to subscriber')

this.change.emit(this.isOpen);

}

i app.module.ts:

import { MainMenuService } from './_service/main-menu.service';

1	import { MainMenuService } from './_service/main-menu.service';

og samme fil i providers:

providers: [MainMenuService]

1	providers: [MainMenuService]

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

import { MainMenuService } from '../../_service/main-menu.service';

1	import { MainMenuService } from '../../_service/main-menu.service';

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:

export class EtKomponent implements OnInit {

  constructor(private mainMenuService:MainMenuService) { }

  public toggleSidebar() {
    //Tell the sidebar menu service to
    //change its value. 
    this.mainMenuService.toggle();
  }
  
  ngOnInit() {
  }

}

export class EtKomponent implements OnInit {

constructor(private mainMenuService:MainMenuService) { }

public toggleSidebar() {

//Tell the sidebar menu service to

//change its value.

this.mainMenuService.toggle();

}

ngOnInit() {

}

…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:

export class EtKomponentMedSidebar implements OnInit {
  //Template variable to open/close the sidebar menu
  public _opened: boolean = false;
 
  constructor(private mainMenuService: MainMenuService) { }

  public toggle() {
    this.mainMenuService.toggle();
  }

  ngOnInit() {
    //Subscribe to changes on `isOpen` from sidebar menu service
    this.mainMenuService.change.subscribe(isOpen => {
      //Set the template variable accordingly to open/close the menu
      this._opened = isOpen;
    })
  }
}

export class EtKomponentMedSidebar implements OnInit {

//Template variable to open/close the sidebar menu

public _opened: boolean = false;

constructor(private mainMenuService: MainMenuService) { }

public toggle() {

this.mainMenuService.toggle();

}

ngOnInit() {

//Subscribe to changes on `isOpen` from sidebar menu service

this.mainMenuService.change.subscribe(isOpen => {

//Set the template variable accordingly to open/close the menu

this._opened = isOpen;

})

}