DEV Community

Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on

Débuter avec Angular 14: #2 Afficher la valeur d'una d'une variable avec le data binding

Un composant

Dans l'ame de chaque Framework frontend, que ce soir React, Vue, peu importe le nom et qui a inventé le framework. Le coeur de tout est le "Composant".

Je vais explorer ce qu'est et comment écrire un composant, puis modifier un peu le template (l'affichange).

Dans l'ame de chaque application se trouve le principe de la Todo-list: un "Item" que je peux:

  • Multiplier (liste)
  • Modifier (edition)
  • Supprimer
  • Visualiser

Je remplace "Item" par "Musique" ca devient Spotify
Je remplace "Item" par "Champion" ca devient BlitzGG ou OPGG
Je remplace "Item" par "Video" ca devient YouTube
Etc...

Je vais aller voir ce qui se passe dans le fichier app.component.ts

Petite info, plutot que de chercher dans les dossiers en cliquant un peu partout, je prefere utiliser command + p sur Mac et crtl + p sur windows pour rechercher des fichiers dans Vual Studio Code, je dis ca je dis rien.

// Import de l'annotation Component
import { Component } from '@angular/core';

@Component({
  // Comment je l'instancie dans mon html: <app-root/>
  selector: 'app-root',
  // Où se trouve son affichage
  templateUrl: './app.component.html', 
  // Où se trouve son style
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // Juste pour tester
  // Un attribut `title`
  title = 'my-app';
}
Enter fullscreen mode Exit fullscreen mode

Avant de lancer le serveur de developpement, je veux que tu remplaces le contenu de app.component.html par ceci:

<h1>Hello world!</h1>
Enter fullscreen mode Exit fullscreen mode

C'est parti!

npm start
Enter fullscreen mode Exit fullscreen mode

Dans mon navigateur, je visite http://localhost:4200/.

J'ai ca du coup:

Image description

Amuse-toi à modifier le contenu du fichier .html pour voir comment ca réagit.

Concept clè: Le data binding

Si je traduis literalement mon anglais de ouf, ce serait "liaison de donnée", mais qu'est-ce donc.

Tu te rappelles que dans mon fichier app.component.ts j'avais:

// ...
export class AppComponent {
  // Ma donnée
  title = 'my-app';
}
Enter fullscreen mode Exit fullscreen mode

Image description

Le data binding se fait via l'utilisation des doubles 🥸🥸 moustaches comme ceci:

<h1>{{ title }}</h1>
Enter fullscreen mode Exit fullscreen mode

Je remplace et je constate:

Image description

Top comments (0)