Coding For The Curoius - Code samples

(1)app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'all workshop participants';
}

(2)app.component.html

<ng-container class="container">
  <div class="card">
    <div class="image">
      <img src="#"/>
    </div>
    <div class="content">
      <div class="location">Gothenburg</div>
      <h1>Nils Magnusson</h1>
      <h2>CEO, NM.com</h2>
      <p>Nils is a great made-up guy.</p>
      nils@nils.com |
      <a href="http://www.twitter.com/nilsmagnusson">@nilsmagnusson</a>
    </div>
  </div>
</ng-container>

(4)app.component.ts

import { Component } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'All Workshop Participants';
  data = {};
  private apiUrl = 'https://ca-address-book.herokuapp.com/api/contacts';

  constructor(private http: Http) {
    this.getContacts().subscribe(data => {
      console.log(data);
    });
  }

  getContacts() {
    return this.http.get(this.apiUrl)
      .map((res: Response) => res.json());
  }
}

(5)app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(6)app.component.html

<ng-container *ngFor="let contact of data.contacts" class="container">
  <div class="card">
    <div class="image">
      <img src="{{contact.image}}"/>
    </div>
    <div class="content">
      <div class="location">{{contact.location}}</div>
      <h1>{{contact.name}}</h1>
      <h2>{{contact.role}}, {{contact.company}}</h2>
      <p>{{contact.info}}</p>
      {{contact.email}} |
      <a href="http://www.twitter.com/{{contact.twitter}}">@{{contact.twitter}}</a>
    </div>
  </div>
</ng-container>

(7)app.component.ts

// Line 18 
this.data = data;

(9)app.component.css

// The content of http://bit.ly/2q9f8h0