ANGULAR en moins de 128 mots – TypeScript – Angular Partie 8

Cet article fait suite aux sept premiers sur le sujet ANGULAR et porte sur le langage TypeScript :

Templates et interpolation

L’interpolation est l’incorporation d’expressions dans du texte balisé. Par défaut, l’interpolation utilise comme délimiteur les doubles accolades, {{ et }}.

<h3>Client n° : {{ numeroClient }}</h3>

Exemple de directive avec itération :

<li *ngFor="let client of listeClients">{{client.nom}}</li>

Services :

Les services permettent de découpler le composant de l’appel à un service, ils sont ainsi réutilisables.

ng generate service client

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ClientService {

  constructor() { }

}

La logique est alors découplée du service qui est injectable via l’injection de dépendance.

Injection de dépendance

Exemple d’injection de la dépendance ClientService dans un composant ClientComponent

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class ClientComponent implements OnInit {

...

  getClients(): void {
    this.clientService.getClients();
  }
}

Auteur / autrice

Jean-Paul

Voir toutes les publications