phundrak/ng-pokemon-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fin section 7 : templates angular et directives

Browse Source
This commit is contained in:
Lucien Cartier-Tilet 2023-02-24 10:50:26 +01:00
parent 7b9abb3aba
commit b602d08e2d
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
5 changed files with 80 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/app.component.html Normal file
View File

@ -0,0 +1,27 @@
<h1 class="center">Pokémons</h1>
<div class="container">
<div class="row">
<div *ngFor="let pokemon of pokemonList" class="col m4 s6">
<div
class="card horizontal"
(click)="selectPokemon(pokemon)"
pkmnBorderCard
>
<div class="card-image">
<img [alt]="pokemon.name" [src]="pokemon.picture" />
</div>
<div class="card-stacked">
<div class="card-content">
<p>
{{ pokemon.name }}
</p>
<p>
<small>{{ pokemon.created }}</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

5
src/app/app.component.ts
View File

@ -4,17 +4,18 @@ import { Pokemon } from './pokemon';
@Component({
selector: 'app-root',
template: `<h1>Liste de Pokémons</h1>`,
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
pokemonList: Pokemon[] = POKEMONS;
pokemonSelected: Pokemon | undefined;
ngOnInit() {
console.table(this.pokemonList);
this.selectPokemon(this.pokemonList[0]);
}
selectPokemon(pokemon: Pokemon) {
console.log(`Vous avez cliqué sur le pokémon ${pokemon.name}`);
this.pokemonSelected = pokemon;
}
}

3
src/app/app.module.ts
View File

@ -3,9 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BorderCardDirective } from './border-card.directive';
@NgModule({
declarations: [AppComponent],
declarations: [AppComponent, BorderCardDirective],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],

33
src/app/border-card.directive.ts Normal file
View File

@ -0,0 +1,33 @@
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[pkmnBorderCard]'
})
export class BorderCardDirective {
initialColor = '#f5f5f5';
defaultColor = '#009688';
defaultHeight = 180;
constructor(private el: ElementRef) {
this.setHeight(this.defaultHeight);
this.setBorder(this.initialColor)
}
@Input('pkmnBorderCard') borderColor: string;
@HostListener('mouseenter') onMouseEnter() {
this.setBorder(this.borderColor || this.defaultColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.setBorder(this.initialColor);
}
setHeight(height: number) {
this.el.nativeElement.style.height = `${height}px`;
}
setBorder(color: string) {
this.el.nativeElement.style.border = `solid 4px ${color}`
}
}

26
src/index.html
View File

@ -1,13 +1,17 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgPokemonApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
<head>
<meta charset="utf-8" />
<title>NgPokemonApp</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
</head>
<body>
<app-root></app-root>
</body>
</html>