slidenumbers: true
Angular Templates
Marc Kapke
kapkema@gmail.com
Templates
- A template is the component’s view.
- Tells angular how to render component
- Angular template syntax provides data binding, conditional logic, etc..
- Templates can include other other components
Template example
<h2>Article List</h2>
<p><i>Pick an article from the list</i></p>
<ul>
<li *ngFor="let article of articles" (click)="selectArticle(article)">
</li>
</ul>
<article-detail *ngIf="selectedArticle" [article]="selectedArticle"></article-detail>
Template syntax
- All Html is valid
- Extend Html with Angular specific directives
Template expressions
- Expression executed and assigned to a binding target
- `` uses Interpolation to bind the result of
1+1
template expression - Expression are Javascript like
- Some Javascript expressions are excluded (assignment, new, chaining, bitwise operators)
- Includes template expression operators
Expression context
- Expression context is almost always the component instance
- `` means bind the value of the title property from the current component
Expression operators
- The pipe operator
|
- Pass expression result through one or more transformers
- ``
- The safe navigation operator (?)
- fluent null check just like Groovy
{currentArticle?.title}
Expression guidelines
- Expressions should NOT modify any application state other then the target property
- Should evaluate quickly
- Keep expressions simple.
- If binding requires logic, put it in a method and call it
Data binding refresher
- Binding markup in template defines how to connect both sides.
- Four forms of data binding
- Each form has a direction - to the DOM, from the DOM, or in both directions
Interpolation
- Binds to the DOM from the component
<li></li>
- Interpolation `` displays the component’s
article.title
property within the<li>
element
Property Binding
- Binds to the DOM from the component
<article-detail [article]="selectedArticle"></article-detail>
- Passes the
selectedArticle
from theArticleListComponent
to thearticle
property of the childArticleDetailComponent
- When setting an element property to a non-string data value, you must use property binding.
Event Binding
- From the DOM to the component
<li (click)="selectArticle(article)"></li>
- The
(click)
event binding calls the componentsselectArticle
function when an article is clicked.
Two way Binding
- Combines Property and Event binding in a single notation.
- Data property flows to the DOM from the Component as a property binding.
- User’s changes flow back to the component - resetting the property to the latest value.
<input [(ngModel)]="article.title">
ngModel
is a special directive that maps user changes back to component
Additional Binding scenarios
- Less common but useful
- Attribute binding
- Class binding
- Style binding
Attribute Binding
- One way bindings
- Use when there is no element property to bind.
<table border=1>
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
<!-- ERROR: There is no `colspan` property to set!
<tr><td colspan="1">Three-Four</td></tr>
-->
<tr><td>Five</td><td>Six</td></tr>
</table>
Class binding
- Add and remove css class names dynamically
- Resembles property binding.
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="badCurly">Bad curly</div>
Class binding - toggle
- Instead of overriding the whole class hierarchy
- Toggle on or off specific class names
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute -->
<div class="special"
[class.special]="!isSpecial">This one is not so special</div>
Style binding
- Set inline styles dynamically
- Resembles property binding.
[style.style-property]
- Dash or camelCase style-property names are valid
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
Built-in Attribute directives
- Attribute directives listen to and modify the behavior of HTML elements.
- Applied like attributes.
- Most common are
- NgClass - add and remove set of classes
- NgStyle - and remove set of inline styles
- NgModel - two way data-binding
NgClass
- NgClass accepts map of cssClassName:
[true|false]
// CSS classes: added/removed per current state of component properties
this.currentClasses = {
saveable: this.canSave,
modified: !this.isUnchanged,
special: this.isSpecial
};
<div [ngClass]="currentClasses">Some div</div>
NgStyle
- NgStyle sets multiple inline stlyes dynamically.
- Similar format to NgClass
- Use map of key/values to control styles
- Keys are css 3 style names
// CSS styles: set per current state of component properties
this.currentStyles = {
'font-style': this.canSave ? 'italic' : 'normal',
'font-weight': !this.isUnchanged ? 'bold' : 'normal',
'font-size': this.isSpecial ? '24px' : '12px'
};
<div [ngStyle]="currentStyles">
This div is initially italic, normal weight, and extra large (24px).
</div>
ngModel
- NgModel provides two way data binding
- Requires FormModule be imported
- Encapsulates property binding and event binding (onChange)
<input [(ngModel)]="currentHero.name">
ngModel
- Can declare property and event binding separately
- Useful if you need to intercept a changed value
<input
[ngModel]="currentHero.name"
(ngModelChange)="setUppercaseName($event)">
Built-in Structural directives
- Structural directives add, remove or manipulate elements in the DOM.
*ngIF
- conditionally add or remove from the DOM*ngFor
- repeat a template
*ngIf
- Conditionally add/remove from DOM
- Show/Hide is different - elements remain in
<div *ngIf="isActive">Am I in the Dom?</div>
<!-- show/hide -->
<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>
*ngFor
- Repeater directive
- Presents a list of items
- each item has properties - index, first, last, even, odd
<div *ngFor="let article of articles; let i=index">Article: - </div>
Input properties
- Properties that can be bound as a binding target
- Targets are the left hand side of binding expression
- Every member of a
source
component is available for binding - Must declare what is available to bind as a target
Target property declaration
@Component({
inputs: ['article'],
})
<article-detail [article]="selectedArticle">
Input properties
- Input properties usually receive data values.
- ‘article’ is an Input from the perspective of the ArticleDetailComponent
- Data flows into that property from a binding expression