Components

Create widgets.component.ts

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() {}
}

Create widgets.component.html

<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>

Create widgets.component.css

.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>

Create widget.model.ts

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
  }
];

Update widgets.component.ts

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() {}
}

Update widgets.component.html

<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>

results matching ""

    No results matching ""