diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000..4663012 --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,27 @@ +

Pokémons

+ +
+
+
+
+
+ +
+
+
+

+ {{ pokemon.name }} +

+

+ {{ pokemon.created }} +

+
+
+
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e0569ce..0454d5f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -4,17 +4,18 @@ import { Pokemon } from './pokemon'; @Component({ selector: 'app-root', - template: `

Liste de Pokémons

`, + 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; } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 68937b4..5426295 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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], diff --git a/src/app/border-card.directive.ts b/src/app/border-card.directive.ts new file mode 100644 index 0000000..05c93ea --- /dev/null +++ b/src/app/border-card.directive.ts @@ -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}` + } +} diff --git a/src/index.html b/src/index.html index ca2d930..4d0bba7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,17 @@ - + - - - NgPokemonApp - - - - - - - + + + NgPokemonApp + + + + + + + +