How to use @angular2-material/core - 10 common examples

OverlayModule,
    PortalModule,
    RtlModule,
];

@NgModule({
    imports: [
        MdButtonModule.forRoot(),
        MdCardModule.forRoot(),
        MdCheckboxModule.forRoot(),
        MdGridListModule.forRoot(),
        MdInputModule.forRoot(),
        MdListModule.forRoot(),
        MdProgressBarModule.forRoot(),
        MdProgressCircleModule.forRoot(),
        MdRippleModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdTabsModule.forRoot(),
        MdToolbarModule.forRoot(),
        PortalModule.forRoot(),
        RtlModule.forRoot(),

        // These modules include providers.
        MdButtonToggleModule.forRoot(),
        MdIconModule.forRoot(),
        MdMenuModule.forRoot(),
        MdRadioModule.forRoot(),
        MdSliderModule.forRoot(),
        MdSlideToggleModule.forRoot(),
        MdTooltipModule.forRoot(),
        OverlayModule.forRoot(),
    ],

MdRippleModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdTabsModule.forRoot(),
        MdToolbarModule.forRoot(),
        PortalModule.forRoot(),
        RtlModule.forRoot(),

        // These modules include providers.
        MdButtonToggleModule.forRoot(),
        MdIconModule.forRoot(),
        MdMenuModule.forRoot(),
        MdRadioModule.forRoot(),
        MdSliderModule.forRoot(),
        MdSlideToggleModule.forRoot(),
        MdTooltipModule.forRoot(),
        OverlayModule.forRoot(),
    ],
    exports: MATERIAL_MODULES,
    providers: [MdLiveAnnouncer]
})
export class MaterialRootModule {
}


@NgModule({
    imports: MATERIAL_MODULES,
    exports: MATERIAL_MODULES,
})
export class MdModule {
    static forRoot(): ModuleWithProviders {
        return { ngModule: MaterialRootModule };
    }

@NgModule({
    imports: [
        MdButtonModule.forRoot(),
        MdCardModule.forRoot(),
        MdCheckboxModule.forRoot(),
        MdGridListModule.forRoot(),
        MdInputModule.forRoot(),
        MdListModule.forRoot(),
        MdProgressBarModule.forRoot(),
        MdProgressCircleModule.forRoot(),
        MdRippleModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdTabsModule.forRoot(),
        MdToolbarModule.forRoot(),
        PortalModule.forRoot(),
        RtlModule.forRoot(),

        // These modules include providers.
        MdButtonToggleModule.forRoot(),
        MdIconModule.forRoot(),
        MdMenuModule.forRoot(),
        MdRadioModule.forRoot(),
        MdSliderModule.forRoot(),
        MdSlideToggleModule.forRoot(),
        MdTooltipModule.forRoot(),
        OverlayModule.forRoot(),
    ],
    exports: MATERIAL_MODULES,
    providers: [MdLiveAnnouncer]
})
export class MaterialRootModule {

@NgModule({
    imports: [
        MdButtonModule.forRoot(),
        MdCardModule.forRoot(),
        MdCheckboxModule.forRoot(),
        MdGridListModule.forRoot(),
        MdInputModule.forRoot(),
        MdListModule.forRoot(),
        MdProgressBarModule.forRoot(),
        MdProgressCircleModule.forRoot(),
        MdRippleModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdTabsModule.forRoot(),
        MdToolbarModule.forRoot(),
        PortalModule.forRoot(),
        RtlModule.forRoot(),

        // These modules include providers.
        MdButtonToggleModule.forRoot(),
        MdIconModule.forRoot(),
        MdMenuModule.forRoot(),
        MdRadioModule.forRoot(),
        MdSliderModule.forRoot(),
        MdSlideToggleModule.forRoot(),
        MdTooltipModule.forRoot(),
        OverlayModule.forRoot(),
    ],
    exports: MATERIAL_MODULES,
    providers: [MdLiveAnnouncer]
})
export class MaterialRootModule {
}

__metadata('design:type', core_1.QueryList)
    ], MdSidenavLayout.prototype, "_sidenavs", void 0);
    MdSidenavLayout = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'md-sidenav-layout',
            // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because
            // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav
            // changes its state.
            directives: [MdSidenav],
            template: "<div class="\&quot;md-sidenav-backdrop\&quot;"></div>     ",
            styles: ["/** * Mixin that creates a new stacking context. * see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ /** * This mixin hides an element visually. * That means it's still accessible for screen-readers but not visible in view. */ /** * Forces an element to grow to fit floated contents; used as as an alternative to * `overflow: hidden;` because it doesn't cut off contents. */ /** * A mixin, which generates temporary ink ripple on a given component. * When $bindToParent is set to true, it will check for the focused class on the same selector as you included * that mixin. * It is also possible to specify the color palette of the temporary ripple. By default it uses the * accent palette for its background. */ /** * A collection of mixins and CSS classes that can be used to apply elevation to a material * element. * See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html * Examples: * * * .md-foo { *   @include $md-elevation(2); * *   &amp;:active { *     @include $md-elevation(8); *   } * } * * <div class="\&quot;md-elevation-z2\&quot;" id="\&quot;external-card\&quot;"><p>Some content</p></div> * * For an explanation of the design behind how elevation is implemented, see the design doc at * https://goo.gl/Kq0k9Z. */ /** * The css property used for elevation. In most cases this should not be changed. It is exposed * as a variable for abstraction / easy use when needing to reference the property directly, for * example in a will-change rule. */ /** The default duration value for elevation transitions. */ /** The default easing value for elevation transitions. */ /** * Applies the correct css rules to an element to give it the elevation specified by $zValue. * The $zValue must be between 0 and 24. */ /** * Returns a string that can be used as the value for a transition property for elevation. * Calling this function directly is useful in situations where a component needs to transition * more than one property. * * .foo { *   transition: md-elevation-transition-property-value(), opacity 100ms ease; *   will-change: $md-elevation-property, opacity; * } */ /** * Applies the correct css rules needed to have an element transition between elevations. * This mixin should be applied to elements whose elevation values will change depending on their * context (e.g. when active or disabled). */ /** * Mixin to help with defining LTR/RTL 'transform: translate3d()' values. * @param $open The translation value when the sidenav is opened. * @param $close The translation value when the sidenav is closed. */ /* This mixin ensures a sidenav element spans the whole viewport.*/ :host { position: relative; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; overflow-x: hidden; } :host[fullscreen] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } :host[fullscreen].md-sidenav-opened { overflow: hidden; } :host &gt; .md-sidenav-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2; visibility: hidden; } :host &gt; .md-sidenav-backdrop.md-sidenav-shown { visibility: visible; background-color: rgba(0, 0, 0, 0.6); } :host &gt; md-content { position: relative; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); display: block; } :host &gt; md-sidenav { position: relative; -webkit-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); display: block; position: fixed; top: 0; bottom: 0; z-index: 3; min-width: 5%; overflow-y: auto; background-color: white; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } :host &gt; md-sidenav.md-sidenav-closed { visibility: hidden; } :host &gt; md-sidenav.md-sidenav-closing { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); will-change: transform; } :host &gt; md-sidenav.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } :host &gt; md-sidenav.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } :host &gt; md-sidenav.md-sidenav-push { background-color: white; } :host &gt; md-sidenav.md-sidenav-side { z-index: 1; } :host &gt; md-sidenav.md-sidenav-end { right: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } :host &gt; md-sidenav.md-sidenav-end.md-sidenav-closed { visibility: hidden; } :host &gt; md-sidenav.md-sidenav-end.md-sidenav-closing { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); will-change: transform; } :host &gt; md-sidenav.md-sidenav-end.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } :host &gt; md-sidenav.md-sidenav-end.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } :host-context([dir=\"rtl\"]) &gt; md-sidenav { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-closed { visibility: hidden; } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-closing { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); will-change: transform; } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-end { left: 0; right: auto; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-end.md-sidenav-closed { visibility: hidden; } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-end.md-sidenav-closing { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); will-change: transform; } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-end.md-sidenav-opening { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); will-change: transform; } :host-context([dir=\"rtl\"]) &gt; md-sidenav.md-sidenav-end.md-sidenav-opened { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } ",
"/** * We separate transitions to be able to disable them in unit tests, by simply not loading this file. */ :host &gt; .md-sidenav-backdrop.md-sidenav-shown { -webkit-transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } :host &gt; md-content { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } :host &gt; md-sidenav { -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } "],
        }),
        __param(0, core_1.Optional()), 
        __metadata('design:paramtypes', [dir_1.Dir, core_1.ElementRef, core_1.Renderer])
    ], MdSidenavLayout);
    return MdSidenavLayout;
}());
exports.MdSidenavLayout = MdSidenavLayout;

GlobalPositionStrategy.prototype.apply = function (element) {
        element.style.position = this._cssPosition;
        element.style.top = this._top;
        element.style.left = this._left;
        element.style.bottom = this._bottom;
        element.style.right = this._right;
        // TODO(jelbourn): we don't want to always overwrite the transform property here,
        // because it will need to be used for animations.
        var tranlateX = this._reduceTranslateValues('translateX', this._translateX);
        var translateY = this._reduceTranslateValues('translateY', this._translateY);
        apply_transform_1.applyCssTransform(element, tranlateX + " " + translateY);
        return Promise.resolve();
    };
    /** Reduce a list of translate values to a string that can be used in the transform property */

}
            else {
                return isOpen ? this._openPromise : this._closePromise;
            }
        }
        this._opened = isOpen;
        this._transition = true;
        if (isOpen) {
            this.onOpenStart.emit(null);
        }
        else {
            this.onCloseStart.emit(null);
        }
        if (isOpen) {
            if (this._openPromise == null) {
                var completer = new promise_completer_1.PromiseCompleter();
                this._openPromise = completer.promise;
                this._openPromiseReject = completer.reject;
                this._openPromiseResolve = completer.resolve;
            }
            return this._openPromise;
        }
        else {
            if (this._closePromise == null) {
                var completer = new promise_completer_1.PromiseCompleter();
                this._closePromise = completer.promise;
                this._closePromiseReject = completer.reject;
                this._closePromiseResolve = completer.resolve;
            }
            return this._closePromise;
        }
    };

const MATERIAL_MODULES: any[] = [
    MdCoreModule,
    MdSidenavModule,
    MdListModule,
    MdToolbarModule,
    MdCardModule,
    MdRadioModule,
    MdInputModule,
    MdButtonModule,
    MdIconModule
];

@NgModule({
    imports: [
        MdCoreModule.forRoot(),
        MdSidenavModule.forRoot(),
        MdListModule.forRoot(),
        MdToolbarModule.forRoot(),
        MdCardModule.forRoot(),
        MdRadioModule.forRoot(),
        MdInputModule.forRoot(),
        MdButtonModule.forRoot(),
        MdIconModule.forRoot()
    ],
    exports: MATERIAL_MODULES
})

export class MaterialModule { }

import { ListRest } from './components/List.rest';

@NgModule({
  declarations: [
    App,
    DisplayFriendPipe,
    FriendsGraphql,
    FriendsRest,
    Intro,
    ListGraphql,
    ListRest
  ],
  imports: [
    BrowserModule,
    HttpModule,
    MdCoreModule.forRoot(),
    MdCardModule.forRoot(),
    MdButtonModule.forRoot(),
    MdToolbarModule.forRoot(),
    RouterModule.forRoot(routes)
  ],
  providers: [
    ProfilesService,
  ],
  bootstrap: [App]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

return 0;
        },
        enumerable: true,
        configurable: true
    });
    __decorate([
        core_1.Input(), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "align", void 0);
    __decorate([
        core_1.Input(), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "mode", void 0);
    __decorate([
        core_1.Input('opened'),
        field_value_1.BooleanFieldValue(), 
        __metadata('design:type', Boolean)
    ], MdSidenav.prototype, "_opened", void 0);
    __decorate([
        core_1.Output('open-start'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "onOpenStart", void 0);
    __decorate([
        core_1.Output('open'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "onOpen", void 0);
    __decorate([
        core_1.Output('close-start'), 
        __metadata('design:type', Object)
    ], MdSidenav.prototype, "onCloseStart", void 0);
    __decorate([
        core_1.Output('close'),