<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>Flex-Layout Template</title>
<link rel="stylesheet" href="assets/style.css" />
<!-- theme file -->
<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
<script src="https://unpkg.com/zone.js@0.7.2?main=browser"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="lib/config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<test-app>
loading...
</test-app>
</body>
</html>
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
// Copy of compiler options in standard tsconfig.json
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/flex-layout' : 'https://rawgit.com/angular/flex-layout-builds/master/bundles/flex-layout.umd.js',
'@angular/material' : 'npm:@angular/material/bundles/material.umd.js',
// other libraries
'hammerjs': 'npm:hammerjs',
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'typescript': 'npm:typescript@2.0.10/lib/typescript.js',
},
//packages defines our app package
packages: {
app: {
main: './boot.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {TestAppModule} from './app/test-app-module';
platformBrowserDynamic().bootstrapModule(TestAppModule);
//our root app component
import {Component} from '@angular/core'
import 'hammerjs';
@Component({
selector: 'test-app',
template: `
<!-- references to "original plunker" below are to:
https://plnkr.co/edit/xTTkYjQaa4hJxhqSn7AA?p=preview (of which this is a fork) -->
<div *ngIf="condition == true" fxLayout="column" fxLayoutGap="15px">
<!--- baseline: the row in the original plunker-->
<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
<md-card fxFlex="calc(25%+15px)" *ngFor="let d of details">
<md-card-content>
Content Row 1
</md-card-content>
</md-card>
</div>
<!-- This row demonstrates that the nonsense inside fxFlex="" apears to be silently defaulting to simply fxFlex -->
<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
<md-card fxFlex="calc(foobarpx)" *ngFor="let d of details">
<md-card-content>
Content Row 2
</md-card-content>
</md-card>
</div>
<!-- This row I believe demonstrates that had the original plunker's syntax been parsed properly, the result
would have been different than claimed -->
<!-- QUESTION HERE: why is the fourth md-card in this row (which wraps to a second line)
displaying across the entire second line? -->
<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
<md-card fxFlex="calc(25% + 15px)" *ngFor="let d of details">
<md-card-content>
Content Row 3
</md-card-content>
</md-card>
</div>
<!-- This row demonstrates that even a calc() syntax that should not wrap
is being thrown away and defaulting to fxFlex -->
<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
<md-card fxFlex="calc(25% - 30px)" *ngFor="let d of details">
<md-card-content>
Content Row 4
</md-card-content>
</md-card>
</div>
<!-- This row I believe demonstrates the initial intent of the plunker (controlling flex layout of a md-card)-->
<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
<md-card fxFlex="20%" *ngFor="let d of details">
<md-card-content>
Content Row 5
</md-card-content>
</md-card>
</div>
<!-- This demonstrates a conflixt in the styling of a card, which presumably
has some minimum not able to be overwridden by fxFlex -->
<div fxLayout="row" fxLayoutWrap="wrap" fxLayoutAlign="start start" fxLayoutGap="15px" >
<md-card fxFlex="1px" *ngFor="let d of details">
<md-card-content>
Content Row 6
</md-card-content>
</md-card>
</div>
</div>
<button md-button (click)="condition = !condition">Toggle</button>
`,
})
export class TestApp {
condition = true;
details = [ 1, 2, 3,4 ];
}
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import * as Rx from 'rxjs/Rx';
import {MaterialModule} from "@angular/material";
import {FlexLayoutModule} from "@angular/flex-layout";
import { TestApp} from "./test-app";
@NgModule({
imports: [
BrowserModule,
MaterialModule.forRoot(),
FlexLayoutModule
],
declarations: [ TestApp ],
bootstrap: [ TestApp ]
})
export class TestAppModule {}
html, body, material-app, md-sidenav-container, .my-content {
margin: 0;
width: 100%;
height: 100%;
font-family: Roboto,"Helvetica Neue",sans-serif;
}
.main-content > span {
font-size : 0.8em;
color : #aeaeae;
}
.containerX {
margin-top: 45px;
border: solid 1px #b6b6b6;
box-sizing: content-box !important;
}
.colorNested, .colored, .coloredContainerX {
height:200px;
}
md-card {
background-color: white;
}
div.coloredContainerX > div, div.colorNested > div > div {
padding: 8px;
box-shadow: 0px 2px 5px 0 rgba(52, 47, 51, 0.63);
opacity: 0.9;
color: #fff;
text-align: center;
}
div.coloredContainerX > div:nth-child(1), div.colorNested > div > div:nth-child(1) {
background-color: #009688;
}
div.coloredContainerX > div:nth-child(2), div.colorNested > div > div:nth-child(2) {
background-color: #3949ab;
}
div.coloredContainerX > div:nth-child(3), div.coloredChildren > div:nth-child(3), div.colorNested > div > div:nth-child(3) {
background-color: #9c27b0;
}
div.coloredContainerX > div:nth-child(4), div.coloredChildren > div:nth-child(4), div.colorNested > div > div:nth-child(4) {
background-color: #b08752;
}
div.coloredContainerX > div:nth-child(5), div.coloredChildren > div:nth-child(5), div.colorNested > div > div:nth-child(5) {
background-color: #5ca6b0;
}
div.colored > div {
padding: 8px;
box-shadow: 0px 2px 5px 0 rgba(52, 47, 51, 0.63);
opacity: 0.9;
color: #fff;
text-align: center;
}
div.colored > div:nth-child(1), .one {
background-color: #009688;
}
div.colored > div:nth-child(2), .two {
background-color: #3949ab;
}
div.colored > div:nth-child(3), .three {
background-color: #9c27b0;
}
div.colored > div:nth-child(4), .four {
background-color: #8bc34a;
}
div.colored > div:nth-child(5), .five {
background-color: #03A9F4;
}
div.colored > div:nth-child(6), .six {
background-color: #c9954e;
}
div.colored > div:nth-child(7), .seven {
background-color: #FF5722;
}
.hint {
margin:5px;
font-size:0.9em;
color: #a3a3a3;
margin-bottom:0;
}
.title {
margin:5px;
font-size:0.9em;
color: #5c5c5c;
}
.box {
border: solid 1px gray;
}
button.md-primary {
margin-left:25px;
}
.demo-content {
background-color: ghostwhite;
}
md-toolbar-row button {
min-width: 150px;
}
div.colored.box.nopad > div {
padding: 0;
}
.intro {
margin-top: -52px;
margin-left: 15px;
color: #5c5c5c;
}
.version {
font-size:0.8em;
color: #aeaeae;
margin-top:20px;
}
.blocks {
min-width: 75px;
min-height: 50px;
}
# Flex Layout
Let's explore how to use Flex-Layout and its MatchMediaObservalbe service
to enable the Angular Material SideNav to open and close responsively.
---
### Quick Links
* [Wiki Docs](https://github.com/angular/flex-layout/wiki)
* [License: MIT](https://raw.githubusercontent.com/angular/flex-layout-builds/master/LICENSE)
Developers
* [API Overview](https://github.com/angular/flex-layout/wiki/API-Overview)
* [Developer Setup](https://github.com/angular/flex-layout/wiki/Developer-Setup)
* [Builds + Fast Start](https://github.com/angular/flex-layout/wiki/Fast-Starts)
* [Integration with Angular CLI](https://github.com/angular/flex-layout/wiki/Integration-with-Angular-CLI)
Demos
* [Explore Online](https://tburleson-layouts-demos.firebaseapp.com/)
* [Source Code](https://github.com/angular/flex-layout/blob/master/src/demo-app/app/demo-app-module.ts)
Templates
* [Plunkr Template](https://plnkr.co/edit/h8hzyoEyqdCXmTBA7DfK?p=preview)
----