diff --git a/examples/app.html b/examples/app.html index 5b653ac9..bee2be4b 100644 --- a/examples/app.html +++ b/examples/app.html @@ -1,63 +1,75 @@ - + +
+ + + +

{{navigation?.currentTitle}}

+ + +
+ +

- - -

{{navigation?.currentTitle}}

- - -
- -

- Components –  - {{navigation?.currentTitle}} -

- + Components –  + {{navigation?.currentTitle}} +

+ v{{version}} -
- - + + + + + + + + - - - + -
- - - diff --git a/examples/app.ts b/examples/app.ts index e64229e7..88d2516a 100644 --- a/examples/app.ts +++ b/examples/app.ts @@ -22,6 +22,8 @@ import {AfterViewInit} from "angular2/core"; import {VersionService} from "./services/version"; import { AppViewListener } from 'angular2/src/core/linker/view_listener'; import { DebugElementViewListener } from 'angular2/platform/common_dom'; +import {SidenavService} from "ng2-material/components/sidenav/sidenav"; +import {IComponentMeta} from "./services/components"; /** * Describe an example that can be dynamically loaded. @@ -48,17 +50,32 @@ export interface IExampleData { }) export class DemosApp { - public site:string = 'Angular2 Material'; + public site: string = 'Angular2 Material'; meta: any; version: string; - constructor(http: Http, public navigation: NavigationService) { + components: IComponentMeta[] = []; + + constructor(http: Http, + public navigation: NavigationService, + private _components: ComponentsService, + private _sidenav: SidenavService) { http.get('public/version.json') .subscribe((res: Response) => { this.version = res.json().version; }); + + this._components.getComponents() + .then((comps) => { + this.components = comps; + }); + + } + + showMenu(event?) { + this._sidenav.show('menu'); } } @@ -69,7 +86,7 @@ let appProviders = [ bind(LocationStrategy).toClass(HashLocationStrategy) ]; -if(window.location.href.indexOf('github.com') !== -1){ +if (window.location.href.indexOf('github.com') !== -1) { enableProdMode(); } else { diff --git a/examples/routes/component.ts b/examples/routes/component.ts index 73971738..69ba1081 100644 --- a/examples/routes/component.ts +++ b/examples/routes/component.ts @@ -9,6 +9,7 @@ import Example from "../example"; import {ROUTER_DIRECTIVES} from "angular2/router"; import {NavigationService} from "../services/navigation"; import {DOM} from "angular2/src/platform/dom/dom_adapter"; +import {SidenavService} from "../../ng2-material/components/sidenav/sidenav"; @Component({ selector: 'component-page', @@ -30,10 +31,12 @@ export class ComponentPage implements OnInit { constructor(private _components: ComponentsService, private _navigation: NavigationService, + private _sidenav: SidenavService, private _routeParams: RouteParams) { } ngOnInit() { + this._sidenav.hide('menu'); let id = this._routeParams.get('id'); this._components.getComponent(id).then((c: IComponentMeta) => { this.value = c; diff --git a/examples/routes/index.html b/examples/routes/index.html index 9dd51e4b..62985204 100644 --- a/examples/routes/index.html +++ b/examples/routes/index.html @@ -90,8 +90,9 @@

Using a CDN build

What is Material Design?

-

If you're not familiar with Material Design, here are two videos. The first introduces it very generally, and the - second talks about the use of color.

+

If you're not familiar with Google's Material Design, here are two + videos. The first introduces it very generally, and the second talks about the use of color.