Flex-layout: Using responsive API with md-sidenav or other html elements

Created on 23 Dec 2016 · 11Comments · Source: angular/flex-layout

At the moment thanks for Flex-Layout we can easily show or hide an element using the breakpoints.

Is there anyway to use flex-api to open/close the side nav in different resolutions? Something lik:

<md-sidenav opened.gt-sm>side nav contents </md-sidenav]>

Source

geelus

👍2

Most helpful comment

So that is not currently possible. Only the Flex-Layout API understands the responsive aliases (e.g. .gt-md). But you can use an inject MatchMediaObservable; which allows you to be easily notified when a mediaQuery activates.

html, body, material-app, md-sidenav-container, .my-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

<app>
     <responsive-sidenav>
        <div sidenav-content>
            Hello, I am a responsive sideNav component
       </div>
       <div  main-content>
           Hello, I am the primary, main content
       </div>
     </responsive-sidenav>
</app>

Now let's use multi-slot, content projection within our Responsive-Sidenav component:

@Component({  
   selector : 'responsive-sidenav',
   template : `
     <md-sidenav-container>
      <md-sidenav mode="side" [opened]="isOpen">
        <ng-content  select="[sidenav-content]">Projected Drawer Content</ng-content>
      </md-sidenav>    
      <div class="my-content">
        <ng-content  select="[main-content]">Main content</ng-content>
     </div>
    </md-sidenav-container>
`
})
export class ResponsiveSideNav implements OnDestroy {
   private var _subscription; 
   isOpen = true;

   constructor(@Inject(MatchMediaObservable) media$) {
      this._subscription = media$.subscribe(change:MediaChange) => {
          let isMobile = (change.alias == 'xs') || (change.alias == 'sm');
          this.isOpen = !isMobile;
      });
   }

  ngOnDestory() {
    this._subscription.unsubscribe();
  }
}

Demos

Also you can review the source to our online Demo App:

ThomasBurleson on 24 Dec 2016

👍4

All 11 comments

html, body, material-app, md-sidenav-container, .my-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

<app>
     <responsive-sidenav>
        <div sidenav-content>
            Hello, I am a responsive sideNav component
       </div>
       <div  main-content>
           Hello, I am the primary, main content
       </div>
     </responsive-sidenav>
</app>

Now let's use multi-slot, content projection within our Responsive-Sidenav component:

@Component({  
   selector : 'responsive-sidenav',
   template : `
     <md-sidenav-container>
      <md-sidenav mode="side" [opened]="isOpen">
        <ng-content  select="[sidenav-content]">Projected Drawer Content</ng-content>
      </md-sidenav>    
      <div class="my-content">
        <ng-content  select="[main-content]">Main content</ng-content>
     </div>
    </md-sidenav-container>
`
})
export class ResponsiveSideNav implements OnDestroy {
   private var _subscription; 
   isOpen = true;

   constructor(@Inject(MatchMediaObservable) media$) {
      this._subscription = media$.subscribe(change:MediaChange) => {
          let isMobile = (change.alias == 'xs') || (change.alias == 'sm');
          this.isOpen = !isMobile;
      });
   }

  ngOnDestory() {
    this._subscription.unsubscribe();
  }
}

Demos

Also you can review the source to our online Demo App:

ThomasBurleson on 24 Dec 2016

👍4

You guys are awesome! Thank you very much for your rapid response. I didn't expect it to be this quick honestly. Thanks Thomas

geelus on 24 Dec 2016

@geelus - In the future, please post usage questions:

Flex-Layout Groups, or
Gitter Chat Room

Note: the Gitter room is not yet available. Check back after X-mas.

ThomasBurleson on 24 Dec 2016

Thx @geelus . Sorry, I just made some corrections to my sample code ^.

I did not build a Plunkr to verify ;-)

ThomasBurleson on 24 Dec 2016

Here is a Link to the responsive code in the Demo-App source: https://github.com/angular/flex-layout/blob/master/src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts#L45

ThomasBurleson on 24 Dec 2016

Sure, I will. thanks again for your great help.

geelus on 24 Dec 2016

😄1

@geelus - np. Give us a shoutout on Twitter. 🤓

ThomasBurleson on 24 Dec 2016

@geelus - I prepared a Responsive-SideNav Plunkr showing how to use the MatchMediaObservable... only to discover a major bug: see issue #65

The Plunkr ^ has a work around and shows have a sidenav is now responsive.

Thanks for posting this issue... it helped us make the library better!

ThomasBurleson on 24 Dec 2016

@ThomasBurleson glad I could help. Yesterday I used your solution and it worked like a charm! I didn't notice the bug, maybe because I was so excited to see this working!

Merry Christmas and Happy new year!

geelus on 24 Dec 2016

@ThomasBurleson your example has a spelling mistake ngOnDestory