# Root Component
Une application Angular est généralement composé d'un “root component“ qui sera l'élément le plus haut de la hiérarchie de composants Angular.
## `index.html`
Ce composant est utilisé dans le fichier `src/index.html` qui est la page HTML accueillant l'application Angular.
{% tabs %}
{% tab title="src/index.html" %}
```markup
....
```
{% endtab %}
{% endtabs %}
Il s'agit du tag HTML `` utilisant le préfixe `wt` choisi lors de la création de l'application.
## `AppComponent`
Le composant est défini dans le fichier `src/app/app.component.ts` dont voici une version plus minimaliste :
{% tabs %}
{% tab title="src/app.component.ts" %}
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'wt-root',
template: `
Hello real 🌎!
`
})
export class AppComponent {
}
```
{% endtab %}
{% endtabs %}
**Un composant Angular n'est rien d'autre qu'une classe...**
... avec un décorateur `@Component`.
## `@Component`
Ce décorateur prend en paramètre une configuration qui contient au minimum :
* **selector :** le sélecteur CSS qui permettra de lier le tag HTML de l'élément et le code du composant.
* **template :** le template HTML utilisé par Angular pour générer le contenu de l'élément dans le DOM.
Par bonne pratique, nous n'utiliserons pas la propriété `template` pour définir le template HTML mais plutôt **`templateUrl`** qui permet d'indiquer le chemin vers le fichier HTML du template associé au composant.
```typescript
templateUrl: './app.component.html'
```
Le résultat sera identique *(le fichier HTML n'est pas téléchargé en runtime mais plutôt consommé au "build")* mais le code sera plus clair et la "separation of concerns" mieux respectée.
{% hint style="success" %}
La convention de nommage pour un composant est la suivante :
* Les fichiers sont en "kebab-case" suffixés par `.component.ext`. *(e.g. :* `book-preview.component.ts` & `book-preview.component.html`*)*
* La classe est en "PascalCase" suffixée par `Component`. *(e.g. :* `BookPreviewComponent`*)*
* Le sélecteur CSS doit être un sélecteur de tag en "kebab-case" préfixé par le suffixe du produit. *(e.g. :* `wt-book-preview`*).*
{% endhint %}
{% hint style="warning" %}
Le squelette par défaut ne respecte pas la dernière règle *(utilisation de `wt-root` au lieu de `wt-app`)*.
N'hésitez pas à "refactor".
{% endhint %}
## Code source
## Démo StackBlitz
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://guide-angular.wishtack.io/angular/composants/root-component.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.