Selectors de composants

Chaque composant définit un selector CSS qui détermine comment le composant est utilisé :

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Vous utilisez un composant en créant un élément HTML correspondant dans les templates d'autres composants :

@Component({
  template: `
    <profile-photo />
    <button>Upload a new profile photo</button>`,
  ...,
})
export class UserProfile { }

Angular fait correspondre les selectors de manière statique, à la compilation. Modifier le DOM à l'exécution, que ce soit via des bindings Angular ou avec les API du DOM, n'a aucun effet sur les composants rendus.

Un élément ne peut correspondre qu'à un seul selector de composant. Si plusieurs selectors de composants correspondent à un même élément, Angular signale une erreur.

Les selectors de composants sont sensibles à la casse.

Types de selectors

Angular prend en charge un sous-ensemble limité des types de selectors CSS de base dans les selectors de composants :

Pour les valeurs d'attribut, Angular permet de faire correspondre une valeur d'attribut exacte avec l'opérateur d'égalité (=). Angular ne prend pas en charge les autres opérateurs de valeur d'attribut.

Les selectors de composants Angular ne prennent pas en charge les combinateurs, notamment le combinateur de descendance ou le combinateur d'enfant.

Les selectors de composants Angular ne permettent pas de spécifier des namespaces.

La pseudo-classe :not

Angular prend en charge la pseudo-classe :not. Vous pouvez ajouter cette pseudo-classe à n'importe quel autre selector pour restreindre les éléments auxquels le selector d'un composant correspond. Par exemple, vous pourriez définir un selector d'attribute [dropzone] et empêcher la correspondance avec les éléments textarea :

@Component({
  selector: '[dropzone]:not(textarea)',
  ...
})
export class DropZone { }

Angular ne prend en charge aucune autre pseudo-classe ni aucun pseudo-élément dans les selectors de composants.

Combiner des selectors

Vous pouvez combiner plusieurs selectors en les concaténant. Par exemple, vous pouvez cibler les éléments <button> qui spécifient type="reset" :

@Component({
  selector: 'button[type="reset"]',
  ...
})
export class ResetButton { }

Vous pouvez aussi définir plusieurs selectors avec une liste séparée par des virgules :

@Component({
  selector: 'drop-zone, [dropzone]',
  ...
})
export class DropZone { }

Angular crée un composant pour chaque élément qui correspond à l'un quelconque des selectors de la liste.

Choisir un selector

La grande majorité des composants devraient utiliser un nom de custom element comme selector. Tous les noms de custom elements devraient inclure un tiret, comme le décrit la spécification HTML. Par défaut, Angular signale une erreur s'il rencontre un nom de balise personnalisé qui ne correspond à aucun composant disponible, ce qui évite les bugs dus à des noms de composants mal orthographiés.

Consultez Configuration avancée des composants pour plus de détails sur l'utilisation des custom elements natifs dans les templates Angular.

Préfixes de selectors

L'équipe Angular recommande d'utiliser un préfixe court et cohérent pour tous les composants personnalisés définis dans votre projet. Par exemple, si vous deviez construire YouTube avec Angular, vous pourriez préfixer vos composants avec yt-, avec des composants comme yt-menu, yt-player, etc. Placer vos selectors dans un namespace de cette façon indique immédiatement d'où vient un composant donné. Par défaut, l'Angular CLI utilise app-.

Quand utiliser un selector d'attribute

Envisagez un selector d'attribute quand vous souhaitez créer un composant sur un élément natif standard. Par exemple, si vous souhaitez créer un composant de bouton personnalisé, vous pouvez tirer parti de l'élément standard <button> en utilisant un selector d'attribute :

@Component({
  selector: 'button[yt-upload]',
   ...
})
export class YouTubeUploadButton { }

Cette approche permet aux consommateurs du composant d'utiliser directement toutes les API standard de l'élément sans travail supplémentaire. C'est particulièrement utile pour les attributs ARIA comme aria-label.

Angular ne signale pas d'erreur quand il rencontre des attributs personnalisés qui ne correspondent à aucun composant disponible. Lorsqu'ils utilisent des composants avec des selectors d'attribute, les consommateurs peuvent oublier d'importer le composant ou son NgModule, ce qui empêche le rendu du composant. Consultez Importer et utiliser des composants pour plus d'informations.

Les composants qui définissent des selectors d'attribute devraient utiliser des attributs en minuscules et en dash-case. Vous pouvez suivre la même recommandation de préfixe décrite ci-dessus.