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({ @Component({
selector: 'app-root', selector: 'app-root',
template: `<h1>Liste de Pokémons</h1>`, templateUrl: 'app.component.html',
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
pokemonList: Pokemon[] = POKEMONS; pokemonList: Pokemon[] = POKEMONS;
pokemonSelected: Pokemon | undefined;
ngOnInit() { ngOnInit() {
console.table(this.pokemonList); console.table(this.pokemonList);
this.selectPokemon(this.pokemonList[0]);
} }
selectPokemon(pokemon: Pokemon) { selectPokemon(pokemon: Pokemon) {
console.log(`Vous avez cliqué sur le pokémon ${pokemon.name}`); 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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { BorderCardDirective } from './border-card.directive';
@NgModule({ @NgModule({
declarations: [AppComponent], declarations: [AppComponent, BorderCardDirective],
imports: [BrowserModule, AppRoutingModule], imports: [BrowserModule, AppRoutingModule],
providers: [], providers: [],
bootstrap: [AppComponent], 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}`
}
}

14
src/index.html
View File

@ -1,11 +1,15 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>NgPokemonApp</title> <title>NgPokemonApp</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>