Fin section 7 : templates angular et directives
This commit is contained in:
parent
7b9abb3aba
commit
b602d08e2d
27
src/app/app.component.html
Normal file
27
src/app/app.component.html
Normal 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>
|
@ -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,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
33
src/app/border-card.directive.ts
Normal 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}`
|
||||||
|
}
|
||||||
|
}
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user