1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| | import { Component, AfterViewInit } from '@angular/core';
| | import { TdMediaService } from '@covalent/core';
| |
| |
| | const HEROES: Hero[] = [
| | { id: 11, name: 'Mr. Nice' },
| | { id: 12, name: 'Narco' },
| | { id: 13, name: 'Bombasto' },
| | { id: 14, name: 'Celeritas' },
| | { id: 15, name: 'Magneta' },
| | { id: 16, name: 'RubberMan' },
| | { id: 17, name: 'Dynama' },
| | { id: 18, name: 'Dr IQ' },
| | { id: 19, name: 'Magma' },
| | { id: 20, name: 'Tornado' }
| | ];
| |
| | @Component({
| | selector: 'pack-list',
| | templateUrl: 'src/app/pack.list.component.html'
| | })
| |
| | /*`
| | <h2>My Heroes</h2>
| | <ul class="heroes">
| | <li *ngFor="let hero of heroes"
| | [class.selected]="hero === selectedHero"
| | (click)="onSelect(hero)">
| | <span class="badge">{{hero.id}}</span> {{hero.name}}
| | </li>
| | </ul>
| | <div *ngIf="selectedHero">
| | <my-hero-detail [hero]="selectedHero"></my-hero-detail>
| | </div>
| |
| | `*/
| |
| | export class PackListComponent implements AfterViewInit {
| | routes: Object[] = [
| | {
| | title: 'Dashboard',
| | route: '/',
| | icon: 'dashboard',
| | }, {
| | title: 'Product Dashboard',
| | route: '/',
| | icon: 'view_quilt',
| | }, {
| | title: 'Product Logs',
| | route: '/',
| | icon: 'receipt',
| | }, {
| | title: 'Manage Users',
| | route: '/',
| | icon: 'people',
| | }, {
| | title: 'Covalent Templates',
| | route: '/',
| | icon: 'view_module',
| | },
| | ];
| |
| | title = 'Tour of Heroes';
| | heroes = HEROES;
| | selectedHero: Hero;
| | hero: Hero = {
| | id: 1,
| | name: 'Windstorm'
| | };
| |
| | constructor(public media: TdMediaService) {
| |
| | }
| |
| | onSelect(hero: Hero): void {
| | this.selectedHero = hero;
| | }
| |
| | ngAfterViewInit(): void {
| | this.media.broadcast();
| | }
| | }
|
|
