Getting started with Material Design for Blueriq [editor]

Setup Material design 

Go to https://material.angular.io/guide/getting-started

You've installed yarn, so to install angular material design we also use yarn. Open a command prompt and add Angular material and Angular cdk:

• yarn add @angular/material @angular/cdk

To install animations:

• yarn add @angular/animations

Add the import to app.module.ts:

• import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

  and:

• add BrowserAnimationsModule to the array of imports in app.module.ts.

 Include a theme in styles.css:

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

Some components of material design rely on HammerJS for gestures. So install hammerjs:

• yarn add hammerjs 

  After install add the import to src/main.ts:

  import 'hammerjs'

You're going to use different icons of material, so add the following link to index.html:

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

Add Angular component

Now you're ready to add components. Using the command prompt and Angular CLI's scaffolding tooling, add the page component:

• ng g c page 
  This generates the component in `src\app\page\` including its template, local CSS (Angular simulates a so-called shadow dom in which each component has its own scoped CSS) and spec, or test file. Furthermore, it has added the component in the list of declarations of the `AppModule`.  `ng g c` is shorthand for `ng generate component` 

• Replace the generated code in `src\app\page\page.component.ts` with the snipped from under:

  import { Component, Host } from '@angular/core';
  import { BlueriqComponent } from '@blueriq/angular';
  import { Page } from '@blueriq/core';
  
  @Component({
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.css'],
  })
  @BlueriqComponent({
    type: Page,
  })
  export class PageComponent {
  
    constructor(@Host() public page: Page) {}
  
  }

  
  Now write the template:

•  In `src\app\page\page.component.html` add a simple template using the injected page data: `

  <h1>{{ page.displayName }}</h1>
  
  <div *ngFor="let child of page.children" [bqElement]="child"></div>

   

  The `*ngFor` syntax is Angular's way of implementing a repeat over a list, in this case all children of the page. The `[bqElement]` is an Angular _directive_ that causes the passed `child` object to be rendered using the component that matches. 

  The brackets around `bqElement` cause the argument to be interpreted as TypeScript code. 

  Register as Blueriq component Besides registering the component as an Angular declaration, we also need to register it as a Blueriq component for the `@BlueriqComponent` decorator to be picked up. 

• In `src\app\app.module.ts` you need to add the following: 

  providers: [
      BlueriqComponents.register([
        PageComponent,
      ]),
    ],

   

  See it in action 

  If `ng serve` is still running, you can immediately open your browser and the page will have automatically refreshed. You should now see the title of the page if everything went well. In Web Inspector, open the console tab and verify that the table with Blueriq components now contains your page component.