Skip to content

Latest commit

 

History

History
114 lines (78 loc) · 3.45 KB

05.exercices-templates.md

File metadata and controls

114 lines (78 loc) · 3.45 KB
Raw

Angular-cli

Creer un composant avec angular-cli

ng g component interpo

templating

Ref : https://angular.io/guide/template-syntax

Syntax

interpolation {{}}

  1. Ajouter une propriété au composant (interpo.component.ts)
  2. Utiliser cette variable dans le template associé (interpo.component.html)
  3. Quand je change la valeur de la propriété du composant, le template affiche la nouvelle valeur
  4. Tester d'autres possibilités d'interpolation

event binding ()

  1. Ajouter une bouton au template
  2. Ajouter une methode au composant
  3. A chaque click, le bouton doit changer le texte

property binding []

  • ex1. A chaque click, le bouton doit changer la couleur du texte (cf. https://angular.io/guide/template-syntax#style-binding)

  • ex2.

  • Créer 2 classes css dans app.component.css

  • A chaque click, attribuer alternativement une des classe créée précédement. Ex. Quand je clique une première fois, j'attribue la classe .red et si je clique de nouveau, j'attribue la classe .blue.

  • ex3. Ajouter un menu-deroulant qui agit aussi sur la couleur du texte.

template variable : #truc

  • ex1.

    1. Créer un input text
    2. A chaque nouvel saisie dans l'input, logger la propriété value de l'element (avec console.log)

  • ex2.

    1. Créer une checkbox
    2. A chaque changement d'état de l'element (coché / pas coché), logger la propriété checked de l'element (avec console.log)

Good tuto : https://lishman.io/angular-2-property-binding

Directives

ngif

  1. Créer une checkbox
  2. Créer un div contenant du texte
  3. A chaque changement d'état de l'element (coché / pas coché), Cacher/afficher le div contenant le texte.

ngFor

  • ex1.

    1. Ajouter une propriété 'colors' au composant. Cette propriété 'colors' est un tableau de couleur
    2. Créer un tag <select>
    3. Créer les <option> en itérant sur le tableau de couleur avec ngFor

  • ex2.

    1. Ajouter une propriété 'users' dont la valeur est :
    [
    {
      "id": 0,
      "name": "Aisha Eichmann",
      "image": "https://s3.amazonaws.com/uifaces/faces/twitter/malykhinv/128.jpg",
      "jobTitle": "Customer Division Assistant"
    },
    {
      "id": 1,
      "name": "Calista Skiles",
      "image": "https://s3.amazonaws.com/uifaces/faces/twitter/nessoila/128.jpg",
      "jobTitle": "Dynamic Solutions Orchestrator"
    },
    {
      "id": 2,
      "name": "Kristofer Hermiston",
      "image": "https://s3.amazonaws.com/uifaces/faces/twitter/ernestsemerda/128.jpg",
      "jobTitle": "Dynamic Markets Planner"
    }
  ]
  ```

2. Créer un div contenant une liste (ul > li) qui affiche la propriété 'name' de chaque élément de db.json (ngFor)
3. Créer un div qui servira à afficher le détail d'un élément de la liste
4. Quand je clique sur un element de la liste, j'affiche le détail de l'élément (nname, image, jobTitle) en dessous de la liste
5. Si aucun élément de la liste n'a été cliqué, le div de détail ne doit pas s'afficher (ngIf)
6. Ajouter du css pour que le detail s'affiche à côté de la liste

Exemple de resolution dans le composant ex-binding

https://github.com/davidostermann/LPST-Angular-templates

ngswitch

ng-container (https://angular.io/guide/structural-directives) : le tag invisible

Understand ng-template

Component interaction

https://angular.io/guide/component-interaction