C'est quoi le provider ? ​

Dans Angular, un provider est une méthode pour fournir une instance d'une classe ou d'une valeur à une ou plusieurs composantes de l'application. Il permet de configurer les dépendances que les composants de l'application vont utiliser.

Un exemple simple pourrait être de créer un provider qui fournit une instance d'une classe de service qui se connecte à une base de données. Ce service pourrait être utilisé par plusieurs composants de l'application pour récupérer et enregistrer des données.

Exemple ​

Voici un exemple simple de provider dans Angular qui fournit une instance d'une classe de service qui contient une propriété message.

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

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  message = 'Hello World!';
}

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

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  message = 'Hello World!';
}

Et le composant:

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-root',
  template: `
    <div>{{ message }}</div>
  `,
})
export class AppComponent {
    message: string = this.messageService.message

    constructor(private messageService: MessageService) {}
}

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-root',
  template: `
    <div>{{ message }}</div>
  `,
})
export class AppComponent {
    message: string = this.messageService.message

    constructor(private messageService: MessageService) {}
}

Dans ce cas, on a défini un service MessageService qui est fourni au niveau de l'application via la propriété providedIn: 'root' et on l'a importé dans le composant AppComponent pour l'utiliser.

En faisant cela, on a garanti que tous les composants de l'application utilisent la même instance du MessageService, c'est-à-dire que tous les composants partagent la même propriété message.