NgFor - input - models

fd88f46a · Emile TAVERNE · 7b7e297d · fd88f46a · fd88f46a · fd88f46a
Commit fd88f46a authored Nov 10, 2017 by Emile TAVERNE
9 changed files
--- a/trombinoscope/src/app/app.component.html
+++ b/trombinoscope/src/app/app.component.html
@@ -6,8 +6,6 @@
 </header>
 <div class="w80 center ptm">
  <div class="grid-4 has-gutter">
-    <app-card></app-card>
-    <app-card></app-card>
-    <app-card></app-card>
+    <app-card *ngFor="let person of persons" [person]="person"></app-card>
  </div>
 </div>
--- a/trombinoscope/src/app/app.component.ts
+++ b/trombinoscope/src/app/app.component.ts
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {GenderEnum, PersonModel} from "../models";

 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+  private readonly nbPerson: number = 10;

+  private persons: PersonModel[] = [];
+
+  ngOnInit(): void {
+    for (let i = 0; i < this.nbPerson; i++) {
+      const person = new PersonModel();
+      person.id = i;
+      person.lastname = 'Tata ' + person.id;
+      person.firstname = 'Toto';
+      person.email = 'toto.tata@test.fr';
+      person.gender = i % 2 === 0 ? GenderEnum.FEMALE : GenderEnum.MALE;
+
+      this.persons.push(person);
+    }
+  }
 }
--- a/trombinoscope/src/app/components/card/card.component.html
+++ b/trombinoscope/src/app/components/card/card.component.html
-<div class="card pam">
-  <h2 class="txtcenter">{{prenom}} {{nom | uppercase}}</h2>
-  <img class="center w100" [src]="image">
+<div class="card pam mtm tbm">
+  <h2 class="txtcenter">{{person.firstname}} {{person.lastname | uppercase}}</h2>
+  <img *ngIf="person.image; else elseBlock" class="center w100" [src]="person.image">
+  <ng-template #elseBlock>
+    <img class="center w100" [src]="defaultImages.get(person.gender)">
+  </ng-template>
 </div>
--- a/trombinoscope/src/app/components/card/card.component.ts
+++ b/trombinoscope/src/app/components/card/card.component.ts
--- a/trombinoscope/src/assets/favicon.png
+++ b/trombinoscope/src/assets/favicon.png
--- a/trombinoscope/src/favicon.ico
+++ b/trombinoscope/src/favicon.ico
--- a/trombinoscope/src/index.html
+++ b/trombinoscope/src/index.html
@@ -7,7 +7,7 @@

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/png" sizes="50x50" href="/assets/favicon.png">
 </head>
 <body>
  <app-root></app-root>

--- a/trombinoscope/src/models/index.ts
+++ b/trombinoscope/src/models/index.ts
+export * from './person.model';
--- a/trombinoscope/src/models/person.model.ts
+++ b/trombinoscope/src/models/person.model.ts
+export class PersonModel {
+  public id: number;
+  public lastname: string;
+  public firstname: string;
+  public email: string;
+  public gender: GenderEnum;
+  public image: string;
+}
+
+export enum GenderEnum {
+  MALE,
+  FEMALE
+}