Outils du site

Vos enfants ne sont pas vos enfants. Ils sont les fils et les filles de l'appel de la Vie à la Vie. Ils viennent travers vous mais non de vous. Et bien qu'ils soient avec vous, ils ne sont pas à vous. Vous pouvez leur donner votre amour, mais pas vos pensées. Car ils ont leurs propres pensées. Vous pouvez héberger leurs corps, mais pas leurs âmes. Car leurs âmes résident dans la maison de demain que vous ne pouvez visiter, pas même dans vos rêves. Vous pouvez vous efforcer d'être comme eux, mais ne cherchez pas à les faire à votre image. Car la vie ne marche pas reculons, ni ne s'attarde avec hier. Vous êtes les arcs desquels vos enfants sont propulsés, tels des flêches vivantes.L'Archer vise la cible sur le chemin de l'Infini, et Il vous tend de Sa puissance afin que Ses flêches volent vite et loin. Que la tension que vous donnez par la main de l'Archer vise la joie. Car de même qu'Il aime la flêche qui vole, Il aime également l'arc qui est stable. [Khalil GIBRAN]

56-tools:angular

Ceci est une ancienne révision du document !


Angular

Angular client

Angular with Pug

Ressources

Tri table example

Data binding

[(ngModel)] Two-way data binding.
[property] Property binding.
(event) Event binding

Interpolation

{{variable}} interpolation. Les deux formes ci-dessous sont équivalentes:

  • <img src=“{{heroImageUrl}}”> is the interpolated image.
  • <img [src]=“heroImageUrl”> is the property bound image.

Property binding [property]

It flows a value in one direction, from a component's data property into a target element property.

You cannot use property binding to pull values out of the target element.

You can't bind to a property of the target element to read it. You can only set it.

Event binding (event)

Les deux formes ci-dessous sont équivalentes:

  • <button (click)=“onSave()”>Save</button>
  • <button on-click=“onSave()”>On Save</button>

two-way data binding [(ngModel)]

You often want to both display a data property and update that property when the user makes changes.

Template reference variables ( #var )

variable locale qui peut être utilisée par la suite :

<input #phone placeholder="phone number">

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>

Input and Output properties

An Input property is a settable property annotated with an @Input() decorator. Values flow into the property when it is data bound with a property binding [property].

Exemple:

  • Declaration: @Input() hero: Hero;
  • Usage: <app-hero-detail [hero]=“selectedHero”></app-hero-detail>
  • Autre forme d'écriture: bind-hero=“selectedHero”

An Output property is an observable property annotated with an @Output() decorator. The property almost always returns an Angular EventEmitter. Values flow out of the component as events bound with an event binding (event).

Components

Remember that all components are directives.

Directives

There are three kinds of directives in Angular:

  • Components directives: with a template.
  • Structural directives: change the DOM layout by adding and removing DOM elements.
  • Attribute directives: change the appearance or behavior of an element, component, or another directive.

Testing

Exemples et tests

Dernière modification : 2018/04/03 11:34