# 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="" %}