Bonjour, je suis le tuto d'angular,

on me donne un exemple simple host.active:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
import { Component, Input } from '@angular/core';
 
//import { Hero } from './hero';
 
@Component({
  selector: 'hero-app',
  template: `
  <h1>Tour of Heroes</h1>
  <hero-app-main></hero-app-main>
  `,
  styles: [':host.(active){ display:block;border:solid 1px red} ']
})
export class HeroAppComponent {
//  @Input() hero: Hero;
}
d'après ce que j'ai compris, la seul façon d'appliquer du css sur la balise du selector, il faut utiliser ":host".

j'ai testé cela fonctionne, en appliquant ce css, j'ai bien une bordure noire:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
  styles: [':host{ display:block;border:solid 1px red} ']
Maintenant en ajoutant active , comment doit t'on faire pour avoie cette même bordure ?

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
  styles: [':host.(active){ display:block;border:solid 1px red} ']
elle doit dépendre d'un événement comme survoler la zone de cette balise, ou c'est autre chose ?

merci d'avance de votre réponse