Question

Créer un clavier de téléphone avec l'affichage du numéro. Utiliser des décorateurs appris pendant l'unité pédagogique pour permettre de transférer des données entre composants.

Objectif de l'exercice :

Créer un composant téléphone avec 3 sous-composants :

  • Clavier

  • Boutons de suppression

  • Bouton d'appel

Le composant du téléphone doit permettre d'afficher un numéro et un message spécifiant si l'appel est en cours ou s'il y a une erreur dans le numéro.

Le composant clavier est composé de 10 boutons allant de 0 à 9 et à chaque clic sur un bouton on doit ajouter le numéro au composant téléphone.

Le composant « boutons de suppression » est composé de 2 boutons :

  • Lorsque l'on clique sur le premier bouton le téléphone doit supprimer 1 numéro.

  • Lorsque l'on clique sur le deuxième bouton le téléphone doit supprimer tous les numéros.

Le composant « bouton d'appel » est composé de 1 bouton. Au clic le bouton prend le numéro actuel et vérifie qu'il commence bien par 0 et qu'il contient 10 numéros.

Indice

Pour interagir avec le clic de l'utilisateur il suffit d'ajouter une directive click, voici un exemple :

1
<button (click)=”maMethod()”> mon bouton</button>

  • Un clic sur le bouton déclenchera l'appel à la méthode “maMethod()” de votre composant.

  • Le numéro de téléphone ne doit pas être de type number car il doit commencer par 0.

  • La fonction substr permet de récupérer des sous-parties d'une chaîne de caractères.

  • Il n'y a qu'un seul Input pour tout l'exercice. Éviter de traiter les valeurs dans les sous-composants.

Solution

  • Pensez à utiliser en priorité @angular/cli

  • Créer votre projet : ng g new first-component

  • Création des composant :

    • ng g c phone

    • ng g c keyboard

    • ng g c delete

    • ng g c call