Page History

...

• material getting started uitleggen hoe artifactory (staat wel bij redcow...) -> hele getting started bij werken..
• hoe werkt dit in productie (zie blaadje, maag gliphy van)

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:

• Code Block
  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:

• Code Block
  @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:

  Code Block
  import 'hammerjs'

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

• Code Block
  <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:

...

Replace the generated code in `src\app\page\page.component.ts` with the snippet 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) {}

}

See it in action 

Use the command `yarn start` which will open up a browser that navigates to the `default` shortcut that you configured or use `localhost:4200/flow/<project>/<flow>`
For other possible routes please look at the `app.module.ts` routes

...

 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 

...

.