creating more granular components

ContactsManager/app/contacts/contact-card/contact-card.component.html

@@ -0,0 +1,21 @@
+<div class="mdl-card__media">
+ <img [src]="'app/assets/images/' + contact.image" />
+</div>
+<div class="mdl-card__title">
+ <h4 class="mdl-card__title-text">{{contact.name}}</h4>
+</div>
+<div class="mdl-card__supporting-text">
+ <span class="mdl-typography--font-light mdl-typography--subhead">
+ {{contact.address}}, {{contact.city}}, {{contact.state}} {{contact.zip}}
+ </span>
+</div>
+<div class="mdl-card__supporting-text">
+ <span class="mdl-typography--font-light mdl-typography--subhead">
+ {{contact.email}}
+ </span>
+</div>
+<div class="mdl-card__actions">
+ <a [href]="'http:https://twitter.com/' + contact.twitter" class="mdl-button mdl-js-button mdl-typography--text-uppercase" target="_blank">
+ @{{contact.twitter}} <i class="material-icons">chevron_right</i>
+ </a>
+</div>

ContactsManager/app/contacts/contact-card/contact-card.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from 'angular2/core';
+import { Contact } from '../contact';
+
+@Component({
+ selector: 'contact-card',
+ templateUrl: 'app/contacts/contact-card/contact-card.component.html',
+ styles: [`
+ .mdl-card img {
+ width: 100%;
+ }
+ `]
+})
+export class ContactCarComponent {
+ @Input() contact: Contact; 
+}

ContactsManager/app/contacts/display-contacts/display-contacts.component.css

@@ -5,11 +5,6 @@
 }
 
 
-.mdl-card img {
- width: 100%;
-}
-
-
 /*.mdl-card {
  width: 320px;
  height: 320px;

ContactsManager/app/contacts/display-contacts/display-contacts.component.html

@@ -1,22 +1,5 @@
 <div class="mdl-grid">
- <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp" *ngFor="#contact of contactsList">
- <div class="mdl-card__media">
- <img [src]="'app/assets/images/' + contact.image"/>
- </div>
- <div class="mdl-card__title">
- <h4 class="mdl-card__title-text">{{contact.name}}</h4>
- </div>
- <div class="mdl-card__supporting-text">
- <span class="mdl-typography--font-light mdl-typography--subhead">{{contact.address}}, {{contact.city}}, {{contact.state}} {{contact.zip}}</span>
- </div>
- <div class="mdl-card__supporting-text">
- <span class="mdl-typography--font-light mdl-typography--subhead">{{contact.email}}</span>
- </div>
- <div class="mdl-card__actions">
- <a class="android-link mdl-button mdl-js-button mdl-typography--text-uppercase" [href]="'http:https://twitter.com/' + contact.twitter" target="_blank">
- @{{contact.twitter}}
- <i class="material-icons">chevron_right</i>
- </a>
- </div>
+ <div *ngFor="#contact of contactsList" class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
+ <contact-card [contact]="contact"></contact-card>
  </div>
 </div>

ContactsManager/app/contacts/display-contacts/display-contacts.component.ts

@@ -1,11 +1,13 @@
 import { Component, OnInit } from 'angular2/core';
 import { Contact } from '../contact';
+import { ContactCarComponent } from '../contact-card/contact-card.component';
 import { ContactsService } from '../contacts.service';
 
 @Component({
  selector: 'display-contacts',
  templateUrl: 'app/contacts/display-contacts/display-contacts.component.html',
- styleUrls: ['app/contacts/display-contacts/display-contacts.component.css']
+ styleUrls: ['app/contacts/display-contacts/display-contacts.component.css'],
+ directives: [ContactCarComponent]
 })
 export class DisplayContactsComponent implements OnInit {