step-0.md

Get Started

Angular CLI

We're going to get started here by using a generic project created by the Angular CLI. This allows us to scaffold out a project and all of the build configuration automatically.

StackBlitz

In order to avoid installing and configuring tools on your laptop, we're going to use StackBlitz. StackBlitz is an online IDE that integrates with many of the tools relevant to Angular projects (GitHub, TypeScript, Angular CLI, Webpack, NodeJS, SASS, etc.). Additionally, StackBlitz provides code completion and other editor features via VS Code and other custom extensions.

Getting Started

1. Open Step 0 in StackBlitz

   This application doesn't do much. It's just an image and a list of helpful links. First let's wipe out the default content.

2. Replace the content from the template in /src/app/app.component.ts with a router-outlet element.

   The result should be the following:

   template: `
    <router-outlet></router-outlet>
   `,

   This will enable the router to project content into this component. Simply put, this means that the router can display the appropriate content within this component based on the current route (or URL) of the application.

Now let's setup Angular Material

1. Under "Dependencies"->"npm packages"->"enter package name", type @angular/material and press the ENTER key.

   

2. StackBlitz automatically detects unmet peer dependencies and allows you to resolve them with 1 button. Press "Install Missing Dependencies".

3. Add hammerjs to the NPM packages list to enable touch gestures

4. Open /src/main.ts and add an import for hammerjs to load the library

   import 'hammerjs';

   

5. Right click on the app/ folder to get the context menu. In this menu, select to generate a "Module".

6. When prompted, name it material.

7. Open /src/app/app.module.ts and add MaterialModule to the imports array.

8. Then add the following TypeScript import to remove the warning

   import { MaterialModule } from './material/material.module';

9. Remove the contents of /src/app/material/material.module.ts and then paste in the following:

   import { NgModule } from '@angular/core';
   import {
     MatAutocompleteModule, MatBottomSheetModule, MatButtonModule, MatButtonToggleModule,
     MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule,
     MatDividerModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule,
     MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule,
     MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSliderModule,
     MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule,
     MatTabsModule, MatToolbarModule, MatTooltipModule
   } from '@angular/material';
   
   @NgModule({
     imports: [
       MatAutocompleteModule,
       MatBottomSheetModule,
       MatButtonModule,
       MatButtonToggleModule,
       MatCardModule,
       MatCheckboxModule,
       MatChipsModule,
       MatDatepickerModule,
       MatDialogModule,
       MatDividerModule,
       MatExpansionModule,
       MatFormFieldModule,
       MatGridListModule,
       MatIconModule,
       MatInputModule,
       MatListModule,
       MatMenuModule,
       MatNativeDateModule,
       MatPaginatorModule,
       MatProgressSpinnerModule,
       MatRadioModule,
       MatSelectModule,
       MatSidenavModule,
       MatSliderModule,
       MatSlideToggleModule,
       MatSortModule,
       MatSnackBarModule,
       MatStepperModule,
       MatTableModule,
       MatTabsModule,
       MatToolbarModule,
       MatTooltipModule
     ],
     exports: [
       MatAutocompleteModule,
       MatBottomSheetModule,
       MatButtonModule,
       MatButtonToggleModule,
       MatCardModule,
       MatCheckboxModule,
       MatChipsModule,
       MatDatepickerModule,
       MatDialogModule,
       MatDividerModule,
       MatExpansionModule,
       MatFormFieldModule,
       MatGridListModule,
       MatIconModule,
       MatInputModule,
       MatListModule,
       MatMenuModule,
       MatNativeDateModule,
       MatPaginatorModule,
       MatProgressSpinnerModule,
       MatRadioModule,
       MatSelectModule,
       MatSidenavModule,
       MatSliderModule,
       MatSlideToggleModule,
       MatSortModule,
       MatSnackBarModule,
       MatStepperModule,
       MatTableModule,
       MatTabsModule,
       MatToolbarModule,
       MatTooltipModule
     ]
   })
   export class MaterialModule {
   }

   This imports all of the Angular Material modules and makes them available to use in your templates, components, and services.

   NOTE: Importing all of the Material modules in one MaterialModule is only for prototyping. It will result in bundle bloating in a production app.

Install the other dependencies that we'll need

Install the following NPM packages

• @angular/[email protected]
• @swimlane/ngx-charts
• moment
• rxjs-compat

Built-in Theming

Let's add an Angular Material component to very that we've set things up correctly.

1. Open /src/app/app.component.ts and add a toolbar before the router-outlet.

   <mat-toolbar color="primary">Test</mat-toolbar>

2. You should see the text, but the toolbar is missing its coloring. Let's solve that by using one of the built-in Material themes. In /src/styles.scss, import a theme:

   @import '~@angular/material/prebuilt-themes/indigo-pink.css';

   Angular Material comes with 4 built-in themes with formats of primary-accent where the primary color is used for common elements (toolbars, inputs, selects, etc.) and the accent color is used for important interactive components like buttons, slide toggles, radio buttons, checkboxes, etc.

   • indigo-pink
   • deeppurple-amber
   • pink-bluegrey
   • purple-green

   More details on theming in Angular Material can be found in the Theming Guide.

3. Now you should see an indigo toolbar, but it isn't full bleed (meaning that it doesn't stretch to the left, right, and top edges of the page in this case). Let's fix this by adding the following CSS just below that import:

   body {
     margin: 0;
   }

Typography and Icons

1. Material Design comes with an open source icon set. Let's link it in the <head> of our /src/index.html:

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

   You can quickly look up Material Design icons here. Note the filter input in the top left and the new icon themes on the left side.

   

2. Angular Material's typography uses the Roboto font by default. We need to link it, with the font weights that we need to use, in the /src/index.html's <head> as well:

   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

3. Now we want to use Angular Material's typography across our whole app. So we'll add class="mat-typography" to our <html> element. More details on Angular Material's typography can be found in the Typography Guide.

Go to the Next Step