Discussion :

[keokaz]

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

[pterrat]

Tu ne peux pas mettre un div pour englober le template de ton composant? Et appliquer le CSS sur cette div.

[keokaz]

si biensûr ...,
j'ai opter pour une autre solution
j'ai utiliser un ngif et appliquer un ou cacher un div