Skip to content

formation-angular
formation-angular
Commit fd88f46a by Emile TAVERNE
Options

NgFor - input - models

parent 7b7e297d
Showing with 40 additions and 9 deletions
trombinoscope/src/app/app.component.html
...@@ -6,8 +6,6 @@ ...@@ -6,8 +6,6 @@
</header> </header>
<div class="w80 center ptm"> <div class="w80 center ptm">
<div class="grid-4 has-gutter"> <div class="grid-4 has-gutter">
<app-card></app-card> <app-card *ngFor="let person of persons" [person]="person"></app-card>
<app-card></app-card>
<app-card></app-card>
</div> </div>
</div> </div>
trombinoscope/src/app/app.component.ts
import {Component} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {GenderEnum, PersonModel} from "../models";
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] 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);
}
}
} }
trombinoscope/src/app/components/card/card.component.html
<div class="card pam"> <div class="card pam mtm tbm">
<h2 class="txtcenter">{{prenom}} {{nom | uppercase}}</h2> <h2 class="txtcenter">{{person.firstname}} {{person.lastname | uppercase}}</h2>
<img class="center w100" [src]="image"> <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> </div>
trombinoscope/src/index.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <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 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> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
trombinoscope/src/models/index.ts 0 → 100644
export * from './person.model';
trombinoscope/src/models/person.model.ts 0 → 100644
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
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment