Comments (11)
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:
from flex-layout.
Sure, I will. thanks again for your great help.
from flex-layout.
You guys are awesome! Thank you very much for your rapid response. I didn't expect it to be this quick honestly. Thanks Thomas
from flex-layout.
@geelus - In the future, please post usage questions:
Note: the Gitter room is not yet available. Check back after X-mas.
from flex-layout.
Thx @geelus . Sorry, I just made some corrections to my sample code ^.
I did not build a Plunkr to verify ;-)
from flex-layout.
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
from flex-layout.
@geelus - np. Give us a shoutout on Twitter. 🤓
from flex-layout.
@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!
from flex-layout.
@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!
from flex-layout.
@ThomasBurleson your example has a spelling mistake ngOnDestory
from flex-layout.
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.
from flex-layout.
Related Issues (20)
- Support for Angular14 HOT 4
- fxLayoutGap="10px 20px grid" - alternative axis value and grid not working? HOT 1
- Issue when upgrading project from angular v13 to v14 HOT 2
- Conflicting peer dependency on 14.0.0-beta.39 HOT 3
- DirectiveDeclaration' requires 6 type argument(s). HOT 1
- Is there any dependency when mat-action-row tag is involved?? HOT 1
- How outdated are the DOCS? HOT 2
- my Etisalat HOT 2
- Angular 14 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'. Property 'prototype' is missing in type 'MockMediaQueryList' but required in type 'MediaQueryList'. HOT 25
- Angular Layout Migration Guides HOT 103
- Demo code link borken, demo page outdated HOT 2
- Support for Angular 15 HOT 17
- Status angular 15 HOT 6
- Alternative for FlexLayout Lib after dropped support v15+ HOT 11
- Why not continue flex-layout development with a community maintained fork? HOT 23
- Angular 15 Support HOT 8
- Angular 15 Pull request status HOT 4
- Archive the project in github HOT 2
- Why is this discontinued? HOT 2
- flex-layout Should support angular 16 version HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flex-layout.