Sidedrawer with dynamic content


I am trying to implement multiple sidedrawers with different content. I have succeeded in opening the sidedrawer in different locations but the content stays the same. I followed the blog articles but it seems as though with version 4 and being able to call it from a page directly boggles me a bit.

My try:

Any direction pointing will be greatly appreciated.


Your playground seems to be working as expected, may I ask what exactly your issue here.


I may not have been clear, when I select the button to open the left side, it should show the left content. If the button to open the drawer in the ‘Right’ location, it should display the right side content.


Try this,

    get currentLocation() {  
        return this.drawerComponent.sideDrawer.drawerLocation;

    set currentLocation(value: SideDrawerLocation) {
        this.drawerComponent.sideDrawer.drawerLocation = value;


Thank you kind sir, it works as expected now :smiley: