add directive, show trainers details

my-app/src/app/app.component.css

@@ -0,0 +1,33 @@
+.container{
+  width: 100%;
+}
+.content{
+  float: left;
+  width:60%;
+}
+table {
+
+  margin-top: 30px;
+  margin-bottom: 30px;
+  width: 100%;
+  border-collapse: collapse; }
+  table tr:nth-child(odd) {
+    background: #CCC; }
+li{
+  list-style: none;
+}
+table, th, td {
+  border: 1px solid #333; }
+.btn{
+  margin: 3px;
+  padding: 2px;
+}
+.show{
+  float: right;
+  width:40%;
+  padding: 15px;
+}
+img{
+  width:100px;
+  height: 100px;
+}

my-app/src/app/app.component.html

@@ -1,20 +1,4 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
-  </li>
-</ul>
+<h2>Trainers Information</h2>
 
+<trainers></trainers>
+<trainer-show></trainer-show>

my-app/src/app/app.component.ts

@@ -1,10 +1,40 @@
-import { Component } from '@angular/core';
+import { Component, OnChanges, ViewChild, OnInit } from '@angular/core';
+import { TrainersService } from './trainers.service';
+import { TrainersComponent } from './trainers.component';
+import { TrainerShowComponent } from './trainer_show.component'
+// import {Observable} from 'rxjs/Observable';
+// import { Http, Response } from '@angular/http';
+// import 'rxjs/add/operator/map';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl:  'app.component.html',
+  styleUrls: ['./app.component.css'],
+  providers: [TrainersService]
 })
-export class AppComponent {
-  title = 'app';
+export class AppComponent implements OnChanges{
+  trainers: any;
+  trainer: any;
+@ViewChild(TrainerShowComponent) info: TrainerShowComponent;
+  constructor(private trainersService: TrainersService) {
+      this.trainersService.getData().subscribe( (data: any) =>{
+        this.trainers = data.trainers;
+      });
+  }
+ngOnInit() {}
+
+ngOnChanges() {
+    this.trainers = null;
+    setTimeout( () => {
+      this.trainersService.getData().subscribe((data: any) => {
+            this.trainers = data.trainers;
+      });
+    });
+  }
+
+  getDetail(id: number) {
+    this.trainersService.getDetail().subscribe((data: any) => {
+            this.trainer = data.trainers[id];
+      });
+  }
 }

my-app/src/app/app.module.ts

@@ -1,16 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
 import { AppComponent } from './app.component';
+import { EmptyDirective } from './empty.directive';
+import { HttpModule } from '@angular/http';
+import { DefaultAvatarDirective } from './default_avatar.directive';
+import { TrainersService } from './trainers.service'
+import { TrainersComponent } from './trainers.component';
+import { TrainerShowComponent } from './trainer_show.component';
+
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    EmptyDirective,
+    DefaultAvatarDirective,
+    TrainersComponent,
+    TrainerShowComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpModule
   ],
-  providers: [],
+  providers: [TrainersService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

my-app/src/app/default_avatar.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, ElementRef, HostListener, Input, OnInit} from '@angular/core';
+
+@Directive({ selector: '[avatar]' })
+
+export class DefaultAvatarDirective {
+  // avatar: string
+  constructor(private el: ElementRef) {
+
+  }
+@Input('avatar') defaultAvatar: string;
+  ngOnInit() {
+    if(!this.defaultAvatar){
+    this.el.nativeElement.innerHTML = '<img src="http://www.jujournals.net.in/img/user.jpg" alt="avatar" class="img-circle">';
+    }
+  }
+}

my-app/src/app/empty.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, HostListener, Input, OnInit} from '@angular/core';
+
+@Directive({ selector: '[empty]' })
+
+export class EmptyDirective {
+  constructor(private el: ElementRef) {
+
+  }
+@Input('empty') emptyContent: string;
+  ngOnInit() {
+    if(!this.emptyContent){
+    this.el.nativeElement.innerHTML = 'empty content';
+    }
+  }
+}

my-app/src/app/trainer_show.component.html

@@ -0,0 +1,6 @@
+   <div *ngIf = "trainer" class="show">
+   <ul>
+     <li><img src="{{trainer.avatar}}" alt="avatar" class="img-circle"></li>
+    <li>My name is {{trainer.name}}, I was born at {{trainer.birthday}} and I work in {{trainer.team}} team.</li>
+   </ul>
+  </div>

my-app/src/app/trainer_show.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnChanges, OnInit } from '@angular/core';
+import { TrainersService } from './trainers.service';
+
+@Component({
+  selector: 'trainer-show',
+  templateUrl:  'trainer_show.component.html',
+    styleUrls: ['./app.component.css'],
+  providers: [TrainersService]
+})
+export class TrainerShowComponent {
+  trainers: any;
+  trainer: any;
+  hidden: boolean = true;
+// @ViewChild(ShowInfoComponent) info: ShowInfoComponent;
+  constructor(private trainersService: TrainersService) {
+      this.trainersService.getData().subscribe( (data: any) =>{
+        this.trainers = data.trainers;
+      });
+  }
+
+  show(id: number) {
+            this.trainer = this.trainers[id];
+    // this.hidden= false;
+  }
+}

my-app/src/app/trainers.component.html

@@ -0,0 +1,22 @@
+<div class="container">
+<div class="content">
+  <table class="table-striped">
+<tr>
+  <th>Avatar</th>
+  <th>Name</th>
+  <th>Birthday</th>
+  <th>Team</th>
+  <th>Option</th>
+</tr>
+<tr *ngFor = "let trainer of trainers; let id = index" [ngSwitch] = "trainer?.team">
+  <td [empty]="trainer.avatar"><img src="{{trainer.avatar}}" alt="avatar" class="img-circle"></td>
+  <td [empty]="trainer.name">{{trainer.name}}</td>
+  <td [empty]="trainer.birthday">{{trainer.birthday}}</td>
+  <td *ngSwitchCase = "'Ruby'" [ngStyle]="{'color': 'red'}" [empty]="trainer.team">{{trainer.team}}</td>
+  <td *ngSwitchCase = "'FE'" [ngStyle]="{'color': '#BFAC8A'}" [empty]="trainer.team">{{trainer.team}}</td>
+  <td><button (click) = "getDetail(id)" class="btn btn-success">Detail</button></td>
+</tr>
+</table>
+</div>
+
+</div>