24-5 Méthodes activerChargement(), desactiverChargement() et setErreur()

Plutôt que d'utiliser les propriétés directement de la classe BaseComponent, il est préférable d'utiliser des fonctions dédiées et de mettre les propriétés privées.

De cette façon, on pourra faire this.activerChargement() et this.desactiverChargement() sans avoir à connaitre le détail de l'implémentation.

src/app/shared/components/base-component.ts

export abstract class BaseComponent {
  private _msgErreur?: string;
  private _isLoading: boolean = false;

  get msgErreur() {
    return this._msgErreur;
  }

  get isLoading() {
    return this._isLoading;
  }

  setErreur(msgErreur: string) {
    this._msgErreur = msgErreur;
  }

  activerChargement() {
    this._isLoading = true;
  }

  desactiverChargement() {
    this._isLoading = false;
  }
}

Il suffit par la suite de modifier dans les blocs try/catch pour appeler les fonctions plutôt que les propriétés directement.

src/app/features/projets/pages/projets-index.ts

async ngOnInit(): Promise<void> {
  try {
    this.activerChargement()
    this.projets = await this.projetService.obtenirTous();
  } catch (error) {
    this.setErreur("Une erreur est survenue lors du chargement des projets.");
  } finally {
    this.desactiverChargement()
  }
}

attention

Vous aurez à gérer les erreurs et l'état de chargement dans votre projet. Le niveau montre comment le faire pour une seule page/composant, mais le principe devra être appliqué partout où cela est pertinent dans votre projet.