Skip to content
Snippets Groups Projects

Feature/first component

Merged
Laurine LE NETrequested to merge
feature/first-component into main
2 open threads

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
1 1 # Le composant app-component
2 Ce composant est le composant racine de ton application.
3 On l'appelle souvent le *shell* car c'est celui qui est chargé en premier et c'est celui qui permet de charger les autres.
4
5 ## Etape 1 : On supprime tout !!!
6 Comme tu l'as vu Angular a deja mis plein de choses dans ce composant pour coder ta première page au lancement du projet.
7 Comme le titre de cette section l'indique : on peut tout enlever !
8
9 Va dans le `app.component.html` et supprime tout ! Mais vraiment tout !
10
11 ## Etape 2 : l'interpolation
12 Dans le fichier `app.component.ts`, Angular a deja mis une variable `title = 'le nom de ton app';`
13 Cette variable est accessible depuis le fichier htlm de ton app.component, c'est ce qu'on appelle l'interpolation 😊
  • 9 Va dans le `app.component.html` et supprime tout ! Mais vraiment tout !
    10
    11 ## Etape 2 : l'interpolation
    12 Dans le fichier `app.component.ts`, Angular a deja mis une variable `title = 'le nom de ton app';`
    13 Cette variable est accessible depuis le fichier htlm de ton app.component, c'est ce qu'on appelle l'interpolation 😊
    14
    15 A toi de jouer ! Va dans le fichier `app.component.html` et ajoute
    16 ```angular2html
    17 <h1>Bienvenue sur ma super app : {{title}}</h1>
    18 ```
    19 > Le html utilise la *double moustache* {{}} pour afficher les variables du ts.
    20
    21 Rend toi sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} et *magiiie*, tu as bien un titre qui prend en compte ta variable !
    22
    23 > By the way...
    24 > Est ce que tu as remarqué que tu n'avais pas a relancer ton projet pour que l'affichage change ?
  • Laurine LE NET mentioned in commit 3e819a94

    mentioned in commit 3e819a94

  • Please register or sign in to reply
    Loading