Components
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-widgets',
templateUrl: './widgets.component.html',
styleUrls: ['./widgets.component.css']
})
export class WidgetsComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
<div class="mdl-grid items">
<div class="mdl-cell mdl-cell--61-col">
<div class="item-card mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Widgets</h2>
</div>
<div class="mdl-card__supporting-text">
Pending.
</div>
</div>
</div>
</div>
.items {
padding: 20px;
}
Update app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { WidgetsComponent } from './widgets/widgets.component';
@NgModule({
declarations: [
AppComponent,
WidgetsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Update app.component.html
<div class="content mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">{{title}}</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation"></nav>
</div>
</header>
<main class="mdl-layout__content page-content">
<app-widgets></app-widgets>
</main>
</div>
export interface Widget {
id: number;
img?: string;
name?: string;
description?: string;
featured?: boolean;
}
export const widgets = [
{
"id": 1,
"name": "Widget 1",
"description": "This is a description",
"featured": true
},
{
"id": 2,
"name": "Widget 2",
"description": "This is a description!",
"featured": false
},
{
"id": 3,
"name": "Widget 3",
"description": "This is a lovely widget",
"featured": false
}
];
import { Component, OnInit } from '@angular/core';
import { Widget, widgets } from '../shared';
@Component({
selector: 'app-widgets',
templateUrl: './widgets.component.html',
styleUrls: ['./widgets.component.css']
})
export class WidgetsComponent implements OnInit {
widgets: Array<Widget> = widgets;
constructor() {}
ngOnInit() {}
}
<div class="mdl-grid items">
<div class="mdl-cell mdl-cell--61-col">
<div class="item-card mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Widgets</h2>
</div>
<div class="mdl-card__supporting-text">
<pre>{{widgets | json}}</pre>
</div>
</div>
</div>
</div>
Create app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WidgetsComponent } from './widgets/widgets.component';
const routes: Routes = [
{path: '', redirectTo: '/widgets', pathMatch: 'full' },
{path: 'widgets', component: WidgetsComponent},
{path: '**', redirectTo: '/widgets', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class Ng2RestAppRoutingModule { }
Update app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WidgetsComponent } from './widgets/widgets.component';
@NgModule({
declarations: [
AppComponent,
WidgetsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Update app.component.ts
export class AppComponent {
title = 'Angular 2 Applied';
links = {
widgets: ['/widgets']
};
}
Update app.component.html
<div class="content mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">{{title}}</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" [routerLink]="links.widgets">Widgets</a>
</nav>
</div>
</header>
<main class="mdl-layout__content page-content">
<router-outlet></router-outlet>
</main>
</div>