Further information within template syntax.
Angular processes all data bindings once per JavaScript event cycle, starting from the deepest and travelling up to the root of the application component tree.
The material between the braces is a template expression. These are evaluated and converted to a string.
Expressions often refer to values that exist within the expression context, which is usually the component.
{{expression}}<span [innerHTML]="expression"></span>
- One way in
- Data source ---> View target
=and+=new;and,for chaining++and--|and&
Note: sets properties, not attributes (see 'Attributes & properties' in Template syntax)
[target]="expression"bind-target="expression"target={{expression}}
- One way in
- Data source ---> View target
<img [src]="imageUrl" /><example [username]="user.name" />
Consists of a target event on the left, and a template statement on the right.
The template statement responds to an event raised by a binding target (element, component, directive).
Statements can only refer to what's in the statement context, which is usually the component instance.
(event)="statement"on-event="statement"
- One way out
- Data source <--- View target
<button (click)="doSomething()" /><input (keyup.enter)="doSomething() />"
Has the same restrictions as the expression parser, but supports;
- assignment (
=) - chaining (
;and,)<button (click)="doSomething(); doSomethingElse()" />
05-15 - Use on prefix for event handlers, but not for events, eg;
<div (eventName)="onEventName($event)"></div>
[(target)]="expression"bindon-target="expression"
- Two way
- Data source <--> View target
<input [(ngModel)]="user" />