Sujet d'IHM pour améliorer sont angular

sujet-angular-revision.md

La prairie champetere

L3 MIAGE GRENOBLE - aide à la révision

Il est recomander d'utiliser stackblitz pour faire se sujet

1. Créez un fichier nommé fleurs.data.ts contenant le code suivant :

export type FleurType = 'jacinthe' | 'renoncule' | 'myosotis';

export interface Fleur {
  type: FleurType;
  qtePolenMax: number;
}

export type Fleurs = Fleur[];

2. Créez un composant nommé Fleur qui prend en entrée :

• Le type de fleur (de type FleurType)
• La quantité maximale de pollen (de type number)

3. Dans le fichier app.html, appelez le composant Fleur trois fois pour afficher les trois types de fleurs.

4. Implémentez le composant Fleur en suivant les spécifications suivantes :

Affichage :

• Le composant affiche le type de fleur.
• La quantité de pollen actuellement dans la fleur.
• Un bouton pour butiner la fleur.
• Si la fleur est fermée, le bouton est désactivé et l'opacité de la fleur est de 0.8.
• Si la fleur est une 'jacinthe', l'arrière-plan est violet.
• Si la fleur est une 'renoncule', l'arrière-plan est jaune.
• Si la fleur est une 'myosotis', l'arrière-plan est bleu.

Comportement :

• Lorsque l'on clique sur le boutton pour butine la fleur, la quantité de pollen est décrémentée de 1.
• Il est impossible de butiner la fleur lorsque celle-ci est fermée.
• Lorsque la quantité restante de pollen arrive à 0, la fleur se ferme.

5. Créez un service nommé Prairie contenant le code suivant :

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Fleur, Fleurs } from './fleurs.data';

@Injectable()
export class PrairieService {
  constructor() {}

  getPrairieFleursObs(): Observable<Fleurs> {
    return of([
      { type: 'jacinthe', qtePolenMax: 10 },
      { type: 'renoncule', qtePolenMax: 8 },
      { type: 'myosotis', qtePolenMax: 6 },
      { type: 'jacinthe', qtePolenMax: 9 },
      { type: 'renoncule', qtePolenMax: 7 },
      { type: 'myosotis', qtePolenMax: 5 },
      { type: 'jacinthe', qtePolenMax: 11 },
      { type: 'renoncule', qtePolenMax: 6 },
    ]);
  }

  getFleurObs(): Observable<Fleur> {
    return of({ type: 'myosotis', qtePolenMax: 7 });
  }
}

6. Créez un composant nommé Prairie qui utilise le service PrairieService pour afficher une fleur à l'aide de la méthode getFleurObs().

7. Modifiez le composant Fleur pour qu'il émette la quantité de pollen restante (de type number) et si la fleur est ouverte ou fermée (de type boolean).

8. Dans le composant Prairie, abonnez-vous aux événements émis par les fleurs pour afficher la quantité totale restante de pollen ainsi que le nombre de fleurs ouvertes.

9. Mofier le composant Prairie, pour que l'on affiche que les 'myosotis' en utilisant un pipe sur l'observable