Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Materializing Angular

Materializing Angular

Find Google Slides @ https://bit.ly/devfest-pune-17

Hardik Pithva

October 07, 2017
Tweet

More Decks by Hardik Pithva

Other Decks in Technology

Transcript

  1. Motion provides meaning ​Respects and reinforces the user as the

    prime mover Meaningful and appropriate, serving focus to attention Subtlety clear feedback
  2. Components Helps to create beautiful apps with modular and customizable

    UI components Accurate Regularly updated Open source Android, iOS and Web material.io/components
  3. Angular Material UI Component framework for web, mobile and desktop

    Fast and Consistent Versatile Optimized for Angular
  4. Why! Pure-Typescript UI Layout engine No external stylesheets Independent of

    Angular Material (v1 or v2) Only available for Angular (v2.x or higher) Applications Support (future) for Handset/Tablet and Orientation breakpoints
  5. Existing angular app npm install --save @angular/material @angular/cdk * Angular

    Material and Angular CDK npm install --save @angular/animations Animations npm install --save hammerjs Gesture Support
  6. Starting from scratch npm install -g @angular/cli * Angular CLI

    ng new material-demo Create an Angular App ng serve Run an Angular App speakerdeck.com/hardikpthv/rise-with-angular
  7. Material dependencies npm install --save @angular/material @angular/cdk * Angular Material

    and Angular CDK npm install --save @angular/animations Animations npm install --save hammerjs Gesture Support
  8. Import modules import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ ... imports:

    [MatButtonModule, MatCheckboxModule], ... }) export class TutorialAppModule { } * Import the NgModule Note : Create a separate NgModule that imports all of the Material components that you will use in your application.
  9. Import modules import {FlexLayoutModule} from '@angular/flex-layout; @NgModule({ ... imports: [FlexLayoutModule],

    ... }) export class AppModule { } * Import the NgModule to support flex layout
  10. Theming @import "~@angular/material/prebuilt-themes/indigo-pink.css"; style.css Available themes : deeppurple-amber, indigo-pink, pink-bluegrey,

    and purple-green <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Add icons in your app
  11. Get the content and stay tuned • Presentation : onlineedu.in/devfest-pune-17

    • Slides : goo.gl/pgXLJg • Repo. : github.com/online-edu/devfest • Tutorials : youtube.com/onlineedu • VS Code Snippets for Material : bit.ly/ng-material-vscode