chore(dart & ts): update to beta.17
Change `ngFor=“#…”` to `ngFor=“let…` in code. All are .dart files except for `app_component.html` which also has changes for: - `<inpuf var-foo…`> to `<input ref-foo…>` - `#docregion` tag name updates from var-foo to ref-foo. - Other misc updates to minimize diffs with TS version of file, whitespace differences were ignored. + Minor update to sync up Dart prose with TS prose. + Used https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer#resol ved_identifiers to solve https://github.com/angular/angular.io/issues/1033 Guide/pipes not updated as it will be rolled back to beta.15 in PR #1220.
This commit is contained in:
Patrice Chalin
Thibault Sottiaux
parent
d313e1f93c
commit
ff20b55975
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import 'hero_service.dart';
|
|||
@Component(
|
||||
selector: 'hero-list',
|
||||
template: '''
|
||||
<div *ngFor="#hero of heroes">
|
||||
<div *ngFor="let hero of heroes">
|
||||
{{hero.id}} - {{hero.name}}
|
||||
({{hero.isSecret ? 'secret' : 'public'}})
|
||||
</div>''')
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import 'mock_heroes.dart';
|
|||
@Component(
|
||||
selector: 'hero-list',
|
||||
template: '''
|
||||
<div *ngFor="#hero of heroes">
|
||||
<div *ngFor="let hero of heroes">
|
||||
{{hero.id}} - {{hero.name}}
|
||||
</div>''')
|
||||
class HeroListComponent {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import 'hero_service.dart';
|
|||
@Component(
|
||||
selector: 'hero-list',
|
||||
template: '''
|
||||
<div *ngFor="#hero of heroes">
|
||||
<div *ngFor="let hero of heroes">
|
||||
{{hero.id}} - {{hero.name}}
|
||||
</div>''')
|
||||
class HeroListComponent {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ final List<Hero> _heroes = [
|
|||
<h2>My favorite hero is: {{myHero.name}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
<li *ngFor="#hero of heroes">
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const List<String> _heroes = const [
|
|||
<p>Heroes:</p>
|
||||
<ul>
|
||||
// #docregion li-repeater
|
||||
<li *ngFor="#hero of heroes">
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{ hero }}
|
||||
</li>
|
||||
// #enddocregion li-repeater
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ final List<Hero> _heroes = [
|
|||
<h2>My favorite hero is: {{myHero.name}}</h2>
|
||||
<p>Heroes:</p>
|
||||
<ul>
|
||||
<li *ngFor="#hero of heroes">
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{ hero.name }}
|
||||
</li>
|
||||
</ul>'''
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import 'heroes_service.dart';
|
|||
template: '''
|
||||
<div>
|
||||
<ul>
|
||||
<li *ngFor="#editItem of heroes">
|
||||
<li *ngFor="let editItem of heroes">
|
||||
<hero-card
|
||||
[hidden]="editItem.editing"
|
||||
[hero]="editItem.item">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ class AfterContentComponent
|
|||
</after-content>
|
||||
|
||||
<h4>-- Lifecycle Hook Log --</h4>
|
||||
<div *ngFor="#msg of hookLog">{{msg}}</div>
|
||||
<div *ngFor="let msg of hookLog">{{msg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import 'logger_service.dart';
|
|||
</div>
|
||||
|
||||
<h4>-- Lifecycle Hook Log --</h4>
|
||||
<div *ngFor="#msg of hookLog">{{msg}}</div>
|
||||
<div *ngFor="let msg of hookLog">{{msg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import 'spy_directive.dart';
|
|||
Counter = {{counter}}
|
||||
|
||||
<h5>-- Counter Change Log --</h5>
|
||||
<div *ngFor="#chg of changeLog" mySpy>{{chg}}</div>
|
||||
<div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
@ -49,7 +49,7 @@ class MyCounter implements OnChanges {
|
|||
<my-counter [counter]="value"></my-counter>
|
||||
|
||||
<h4>-- Spy Lifecycle Hook Log --</h4>
|
||||
<div *ngFor="#msg of spyLog">{{msg}}</div>
|
||||
<div *ngFor="let msg of spyLog">{{msg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class Hero {
|
|||
<p>{{hero.name}} can {{power}}</p>
|
||||
|
||||
<h4>-- Change Log --</h4>
|
||||
<div *ngFor="#chg of changeLog">{{chg}}</div>
|
||||
<div *ngFor="let chg of changeLog">{{chg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import 'peek_a_boo_component.dart';
|
|||
</peek-a-boo>
|
||||
|
||||
<h4>-- Lifecycle Hook Log --</h4>
|
||||
<div *ngFor="#msg of hookLog">{{msg}}</div>
|
||||
<div *ngFor="let msg of hookLog">{{msg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ import 'spy_directive.dart';
|
|||
<button (click)="reset()">Reset Heroes</button>
|
||||
|
||||
<p></p>
|
||||
<div *ngFor="#hero of heroes" mySpy class="heroes">
|
||||
<div *ngFor="let hero of heroes" mySpy class="heroes">
|
||||
{{hero}}
|
||||
</div>
|
||||
|
||||
<h4>-- Spy Lifecycle Hook Log --</h4>
|
||||
<div *ngFor="#msg of spyLog">{{msg}}</div>
|
||||
<div *ngFor="let msg of spyLog">{{msg}}</div>
|
||||
</div>
|
||||
''',
|
||||
styles: const [
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
# #enddocregion no-rewriter
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import 'hero_service.dart';
|
|||
template: '''
|
||||
<h3>Heroes:</h3>
|
||||
<ul>
|
||||
<li *ngFor="#hero of heroes">
|
||||
<li *ngFor="let hero of heroes">
|
||||
{{hero.name}}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import 'wikipedia_service.dart';
|
|||
<p><i>Fetches after each keystroke</i></p>
|
||||
<input #term (keyup)="search(term.value)"/>
|
||||
<ul>
|
||||
<li *ngFor="#item of items">{{item}}</li>
|
||||
<li *ngFor="let item of items">{{item}}</li>
|
||||
</ul>
|
||||
''',
|
||||
providers: const [WikipediaService])
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import 'wikipedia_service.dart';
|
|||
|
||||
<input #term (keyup)="search(term.value)"/>
|
||||
<ul>
|
||||
<li *ngFor="#item of items">{{item}}</li>
|
||||
<li *ngFor="let item of items">{{item}}</li>
|
||||
</ul>
|
||||
''',
|
||||
providers: const [WikipediaService])
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.6
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
http: ^0.11.3+3
|
||||
|
|
@ -17,4 +17,6 @@ transformers:
|
|||
platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
|
||||
platform_pipes: 'package:angular2/common.dart#COMMON_PIPES'
|
||||
entry_points: 'web/main.dart'
|
||||
resolved_identifiers:
|
||||
BrowserClient: 'package:http/browser_client.dart'
|
||||
- dart_to_js_script_rewriter
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -410,7 +410,7 @@ bindon-ngModel
|
|||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- NgStyle binding -->
|
||||
<hr><h2>NgStyle Binding</h2>
|
||||
<hr><h2 id="ngStyle">NgStyle Binding</h2>
|
||||
|
||||
<!-- #docregion NgStyle-1 -->
|
||||
<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
|
||||
|
|
@ -633,12 +633,11 @@ bindon-ngModel
|
|||
|
||||
<p><i>expand to template = "..."</i></p>
|
||||
<div class="box">
|
||||
<!-- *ngFor w/ hero-detail Component and a template "attribute" directive -->
|
||||
<!-- ngFor w/ hero-detail Component and a template "attribute" directive -->
|
||||
<!-- #docregion Template-3 -->
|
||||
<hero-detail template="ngFor let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>
|
||||
<!-- #enddocregion Template-3 -->
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<p><i>expand to <template></i></p>
|
||||
<div class="box">
|
||||
|
|
@ -655,31 +654,31 @@ bindon-ngModel
|
|||
<!-- template local variable -->
|
||||
<hr><h2 id="local-vars">Template local variables</h2>
|
||||
|
||||
<!-- #docregion var-phone -->
|
||||
<!-- #docregion ref-phone -->
|
||||
<!-- phone refers to the input element; pass its `value` to an event handler -->
|
||||
<input #phone placeholder="phone number">
|
||||
<button (click)="callPhone(phone.value)">Call</button>
|
||||
|
||||
<!-- fax refers to the input element; pass its `value` to an event handler -->
|
||||
<input var-fax placeholder="phone number">
|
||||
<input ref-fax placeholder="fax number">
|
||||
<button (click)="callFax(fax.value)">Fax</button>
|
||||
<!-- #enddocregion var-phone -->
|
||||
<!-- #enddocregion ref-phone -->
|
||||
|
||||
<h4>Example Form</h4>
|
||||
<!-- #docregion var-form -->
|
||||
<!-- #docregion var-form-a -->
|
||||
<!-- #docregion ref-form -->
|
||||
<!-- #docregion ref-form-a -->
|
||||
<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
|
||||
<!-- #enddocregion var-form-a -->
|
||||
<!-- #enddocregion ref-form-a -->
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input id="name" class="form-control" required ngControl="firstName"
|
||||
<input class="form-control" required ngControl="firstName"
|
||||
[(ngModel)]="currentHero.firstName">
|
||||
</div>
|
||||
<!-- #docregion var-form-a -->
|
||||
<!-- #docregion ref-form-a -->
|
||||
<button type="submit" [disabled]="!theForm.form.valid">Submit</button>
|
||||
</form>
|
||||
<!-- #enddocregion var-form-a -->
|
||||
<!-- #enddocregion var-form -->
|
||||
<!-- #enddocregion ref-form-a -->
|
||||
<!-- #enddocregion ref-form -->
|
||||
<br><br>
|
||||
|
||||
<!-- btn refers to the button element; show its disabled state -->
|
||||
|
|
@ -783,16 +782,18 @@ The null hero's name is {{nullHero.firstName}}
|
|||
</div>
|
||||
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
|
||||
<!-- Todo: discuss this in the Style binding section -->
|
||||
<!-- enums in bindings -->
|
||||
<!--
|
||||
|
||||
<hr><h2 id="enums">Enums in binding</h2>
|
||||
|
||||
<!--<p>The name of the Color.red enum is {{color}}</p>-->
|
||||
<p>The current color number is {{color}}</p>
|
||||
<p><button [style.color]="color.toString()" (click)="colorToggle()">Enum Toggle</button>
|
||||
|
||||
<a class="to-toc" href="#toc">top</a>
|
||||
-->
|
||||
|
||||
<!-- #docregion my-first-app -->
|
||||
<h3>My First Angular Application</h3>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ class Hero {
|
|||
<h1>{{title}}</h1>
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="#hero of heroes"
|
||||
<li *ngFor="let hero of heroes"
|
||||
[class.selected]="hero == selectedHero"
|
||||
(click)="onSelect(hero)">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import 'hero_detail_component.dart';
|
|||
<h1>{{title}}</h1>
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="#hero of heroes"
|
||||
<li *ngFor="let hero of heroes"
|
||||
[class.selected]="hero == selectedHero"
|
||||
(click)="onSelect(hero)">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import 'hero_service.dart';
|
|||
<h1>{{title}}</h1>
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="#hero of heroes"
|
||||
<li *ngFor="let hero of heroes"
|
||||
[class.selected]="hero == selectedHero"
|
||||
(click)="onSelect(hero)">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import 'hero_service_1.dart';
|
|||
@Component(
|
||||
selector: 'my-app',
|
||||
template: '''
|
||||
<div *ngFor="#hero of heroes" (click)="onSelect(hero)">
|
||||
<div *ngFor="let hero of heroes" (click)="onSelect(hero)">
|
||||
{{hero.name}}
|
||||
</div>
|
||||
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import 'package:angular2/core.dart';
|
|||
|
||||
<button (click)=addHero(newHero.value)>Add</button>
|
||||
|
||||
<ul><li *ngFor="#hero of heroes">{{hero}}</li></ul>
|
||||
<ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
|
||||
''')
|
||||
class LittleTourComponent {
|
||||
List<String> heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ version: 0.0.1
|
|||
environment:
|
||||
sdk: '>=1.13.0 <2.0.0'
|
||||
dependencies:
|
||||
angular2: 2.0.0-beta.16
|
||||
angular2: 2.0.0-beta.17
|
||||
browser: ^0.10.0
|
||||
dart_to_js_script_rewriter: ^1.0.1
|
||||
transformers:
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"icon": "home",
|
||||
"title": "Angular Docs",
|
||||
"menuTitle": "Docs Home",
|
||||
"banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 release is <b>beta.16</b>. Consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
|
||||
"banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 release is <b>beta.17</b>. Consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
|
||||
},
|
||||
|
||||
"quickstart": {
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ figure.image-display
|
|||
and the imports in `main.dart`.
|
||||
|
||||
In `pubspec.yaml`, the `platform_directives` entry lets us use
|
||||
core directives, such as the NgFor directive that we'll soon add to our app.
|
||||
core directives, such as the `ngFor` directive that we'll soon add to our app.
|
||||
|
||||
In `main.dart`, importing `app_component.dart` lets us implement part
|
||||
of the app in a different Dart file. The QuickStart version of `main.dart`
|
||||
|
|
@ -114,13 +114,13 @@ figure.image-display
|
|||
<a id="ngFor"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
## Showing a list property with NgFor
|
||||
## Showing a list property with ***ngFor**
|
||||
|
||||
We want to display a list of heroes. We begin by adding a list of hero names to the component and redefine `myHero` to be the first name in the list.
|
||||
+makeExample('displaying-data/dart/lib/app_component_2.dart', 'mock-heroes', 'lib/app_component.dart (excerpt)')(format=".")
|
||||
|
||||
:marked
|
||||
Now we use the Angular `NgFor` "repeater" directive in the template to display
|
||||
Now we use the Angular `ngFor` "repeater" directive in the template to display
|
||||
each item in the `heroes` list.
|
||||
|
||||
+makeExample('displaying-data/dart/lib/app_component_2.dart', 'template','lib/app_component.dart (excerpt)')(format=".")
|
||||
|
|
@ -137,15 +137,12 @@ figure.image-display
|
|||
|
||||
.alert.is-important
|
||||
:marked
|
||||
Don't forget the leading asterisk (\*) in `*ngFor`.
|
||||
<!-- Learn more about this and `NgFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.-->
|
||||
Don't forget the leading asterisk (\*) in `*ngFor`. It is an essential part of the syntax.
|
||||
Learn more about this and `ngFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.
|
||||
|
||||
:marked
|
||||
Notice the `#hero` in the `NgFor` double-quoted instruction.
|
||||
The `#hero` is a local template variable
|
||||
<!-- TODO: link to (./template-syntax.html#local-vars) -->
|
||||
declaration.
|
||||
The `#` prefix declares a local variable name named `hero`.
|
||||
Notice the `hero` in the `ngFor` double-quoted instruction;
|
||||
it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).
|
||||
|
||||
Angular duplicates the `<li>` for each item in the list, setting the `hero` variable
|
||||
to the item (the hero) in the current iteration. Angular uses that variable as the
|
||||
|
|
@ -153,8 +150,8 @@ figure.image-display
|
|||
|
||||
.l-sub-section
|
||||
:marked
|
||||
We happened to give `NgFor` a list to display.
|
||||
In fact, `NgFor` can repeat items for any [Iterable](https://api.dartlang.org/stable/dart-core/Iterable-class.html) object.
|
||||
We happened to give `ngFor` a list to display.
|
||||
In fact, `ngFor` can repeat items for any [Iterable](https://api.dartlang.org/stable/dart-core/Iterable-class.html) object.
|
||||
|
||||
:marked
|
||||
Now the heroes appear in an unordered list.
|
||||
|
|
@ -215,19 +212,17 @@ figure.image-display
|
|||
|
||||
In our example, we'd like to display a message if we have a large number of heroes — say, more than 3.
|
||||
|
||||
The Angular `NgIf` directive inserts or removes an element based on a boolean condition.
|
||||
The Angular `ngIf` directive inserts or removes an element based on a boolean condition.
|
||||
We can see it in action by adding the following paragraph at the bottom of the template:
|
||||
+makeExample('displaying-data/dart/lib/app_component.dart', 'message')
|
||||
.alert.is-important
|
||||
:marked
|
||||
Don't forget the leading asterisk (\*) in `*ngIf`.
|
||||
<!-- Learn more about this and `NgIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter. -->
|
||||
|
||||
Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
|
||||
Learn more about this and `ngIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
|
||||
|
||||
:marked
|
||||
The template expression
|
||||
<!--PENDING: link to (./template-syntax.html#template-expressions)-->
|
||||
inside the double quotes looks much like Dart, and it _is_ much like Dart.
|
||||
The [template expression](./template-syntax.html#template-expressions) inside the double quotes
|
||||
looks much like Dart, and it _is_ much like Dart.
|
||||
When the component's list of heroes has more than 3 items, Angular adds the paragraph to the DOM and the message appears.
|
||||
If there are 3 or fewer items, Angular omits the paragraph, so no message appears.
|
||||
|
||||
|
|
@ -247,10 +242,9 @@ figure.image-display
|
|||
## Summary
|
||||
Now we know how to use:
|
||||
- **interpolation** with double curly braces to display a component property
|
||||
- **`NgFor`** to display a list of items
|
||||
- **`ngFor`** to display a list of items
|
||||
- a Dart class to shape the **model data** for our component and display properties of that model
|
||||
- **`NgIf`** to conditionally display a chunk of HTML based on a boolean expression
|
||||
|
||||
- **`ngIf`** to conditionally display a chunk of HTML based on a boolean expression
|
||||
|
||||
Here's our final code:
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ include ../_util-fns
|
|||
|
||||
- How to display validation errors to users and enable/disable form controls
|
||||
|
||||
- How to share information across controls with template local variables
|
||||
- How to share information across controls with template reference variables
|
||||
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
@ -246,7 +246,7 @@ figure.image-display
|
|||
We maintain that list internally (in `HeroFormComponent`).
|
||||
|
||||
We'll add a `select` to our
|
||||
form and bind the options to the `powers` list using `NgFor`,
|
||||
form and bind the options to the `powers` list using `ngFor`,
|
||||
a technique used before in [Displaying Data](./displaying-data.html).
|
||||
|
||||
Add the following HTML *immediately below* the Alter Ego group.
|
||||
|
|
@ -254,7 +254,7 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
This code repeats the `<option>` tag for each power in the list of powers.
|
||||
The `#p` local template variable is a different power in each iteration;
|
||||
The `p` template input variable is a different power in each iteration;
|
||||
we display its name using the interpolation syntax with the double curly braces.
|
||||
|
||||
|
||||
|
|
@ -429,10 +429,8 @@ figure.image-display
|
|||
td <code>ng-invalid</code>
|
||||
|
||||
:marked
|
||||
Let's add a temporary local template variable
|
||||
<!-- TODO: make that a link to (./template-syntax.html#local-vars) -->
|
||||
named **spy**
|
||||
to the Name `<input>` tag and use the spy to display those classes.
|
||||
Let's add a temporary [template reference variable](./template-syntax.html#ref-vars) named **spy**
|
||||
to the "Name" `<input>` tag and use the spy to display those classes.
|
||||
|
||||
+makeExample('forms/dart/lib/hero_form_component_spy.html', 'ngControl-2', 'lib/hero_form_component.html (excerpt)')(format=".")
|
||||
|
||||
|
|
@ -492,19 +490,17 @@ figure.image-display
|
|||
img(src="/resources/images/devguide/forms/name-required-error.png" width="400px" alt="Name required")
|
||||
|
||||
:marked
|
||||
To achieve this effect we need to add two chunks of code:
|
||||
1. A local template variable in the `<input>` tag.
|
||||
<!-- TODO: link to (./template-syntax.html#local-vars)-->
|
||||
1. The "*is required*" message in a nearby `<div>`.
|
||||
We'll display this message only if the control is invalid.
|
||||
To achieve this effect we extend the `<input>` tag with
|
||||
1. a [template reference variable](./template-syntax.html#ref-vars)
|
||||
1. the "*is required*" message in a nearby `<div>` which we'll display only if the control is invalid.
|
||||
|
||||
Here's an example of adding an error message to the "name" input box:
|
||||
- var stylePattern = { otl: /(#name="form")|(.*div.*$)|(Name is required)/gm };
|
||||
+makeExample('forms/dart/lib/hero_form_component.html', 'name-with-error-msg', 'lib/hero_form_component.html (excerpt)', stylePattern)(format=".")
|
||||
|
||||
:marked
|
||||
We initialized the template local variable with the string "ngForm"
|
||||
(`#name="ngForm"`).
|
||||
We need a template reference variable to access the input box's Angular control from within the template.
|
||||
Here we created a variable called `name` and gave it the value "ngForm".
|
||||
|
||||
Angular recognizes that syntax and sets the `name` variable
|
||||
to the `Control` object identified by the `ngControl` directive that,
|
||||
|
|
@ -531,7 +527,7 @@ figure.image-display
|
|||
control is valid.
|
||||
|
||||
In this example, we are pulling the "name" control out of its `controls` collection
|
||||
and assigning it to a template local variable so that we can
|
||||
and assigning it to a template reference variable so that we can
|
||||
access the control's properties—such as the control's own `valid` property.
|
||||
:marked
|
||||
The Alter Ego is optional so we can leave that be.
|
||||
|
|
@ -557,7 +553,7 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
We slipped in something extra there at the end! We defined a
|
||||
template local variable, **`#heroForm`**, and initialized it with the value "ngForm".
|
||||
template reference variable, **`#heroForm`**, and initialized it with the value "ngForm".
|
||||
|
||||
The variable `heroForm` is now a handle to the `NgForm` as we [discussed earlier](#ng-form)
|
||||
with respect to `ngControl`, although this time we have a reference to the form
|
||||
|
|
@ -579,7 +575,7 @@ figure.image-display
|
|||
wire the button's enable/disabled state to the form's validity without Angular's help?
|
||||
|
||||
For us, it was as simple as:
|
||||
1. Define a template local variable on the (enhanced) form element.
|
||||
1. Define a template reference variable on the (enhanced) form element.
|
||||
2. Refer to that variable in a button many lines away.
|
||||
|
||||
|
||||
|
|
@ -637,10 +633,10 @@ figure.image-display
|
|||
- An Angular HTML form template.
|
||||
- A form component class with a `Component` decorator.
|
||||
- The `ngSubmit` directive for handling the form submission.
|
||||
- Template local variables such as `#heroForm`, `#name`, `#p`, and `#spy`.
|
||||
- Template reference variables such as `#heroForm`, `#name`, `#p`, and `#spy`.
|
||||
- The `ngModel` directive for two-way data binding.
|
||||
- The `ngControl` directive for validation and form element change tracking.
|
||||
- The local variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
|
||||
- The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
|
||||
- Property binding to disable the submit button when the form is invalid.
|
||||
- Custom CSS classes that provide visual feedback to users about required invalid controls.
|
||||
|
||||
|
|
|
|||
|
|
@ -321,17 +321,14 @@ table
|
|||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".")
|
||||
+includeShared('{ts}', 'star-template-ngFor-4')
|
||||
|
||||
+includeShared('{ts}', 'local-vars-1')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'Template-4')(format=".")
|
||||
+includeShared('{ts}', 'local-vars-2')
|
||||
+includeShared('{ts}', 'local-vars-refs')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'var-phone')(format=".")
|
||||
+includeShared('{ts}', 'local-vars-value')
|
||||
+includeShared('{ts}', 'local-vars-form-1')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'var-form')(format=".")
|
||||
+includeShared('{ts}', 'local-vars-form-2')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'var-form-a')(format=".")
|
||||
+includeShared('{ts}', 'local-vars-form-3')
|
||||
+includeShared('{ts}', 'ref-vars')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'ref-phone')(format=".")
|
||||
+includeShared('{ts}', 'ref-vars-value')
|
||||
+includeShared('{ts}', 'ref-vars-form-1')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'ref-form')(format=".")
|
||||
+includeShared('{ts}', 'ref-vars-form-2')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'ref-form-a')(format=".")
|
||||
+includeShared('{ts}', 'ref-vars-form-3')
|
||||
|
||||
+includeShared('{ts}', 'inputs-outputs-1')
|
||||
+makeExample('template-syntax/dart/lib/app_component.html', 'io-1')(format=".")
|
||||
|
|
|
|||
|
|
@ -91,19 +91,18 @@ figure.image-display
|
|||
|
||||
.l-main-section
|
||||
:marked
|
||||
## Get user input from a local template variable
|
||||
## Get user input from a template reference variable
|
||||
There's another way to get the user data without the `$event` variable.
|
||||
|
||||
Angular has a syntax feature called **local template variables**.
|
||||
<!-- PENDING: link to ./template-syntax.html#local-vars) -->
|
||||
Angular has a syntax feature called [**template reference variables**](./template-syntax.html#ref-vars).
|
||||
These variables grant us direct access to an element.
|
||||
We declare a local template variable by preceding an identifier with a hash/pound character (#).
|
||||
We declare a template reference variable by preceding an identifier with a hash/pound character (#).
|
||||
|
||||
Here's an example of using a local template variable
|
||||
Here's an example of using a template reference variable
|
||||
to implement a clever keystroke loopback in an ultra-simple template.
|
||||
+makeExample('user-input/dart/lib/loop_back_component.dart', 'loop-back-component', 'web/loop_back_component.dart')(format=".")
|
||||
:marked
|
||||
We've declared a template local variable named `box` on the `<input>` element.
|
||||
We've declared a template reference variable named `box` on the `<input>` element.
|
||||
The `box` variable is a reference to the `<input>` element itself, which means we can
|
||||
grab the input element's `value` and display it
|
||||
with interpolation between `<p>` tags.
|
||||
|
|
@ -126,7 +125,7 @@ figure.image-display
|
|||
We're binding to the number 0, the shortest statement we can think of.
|
||||
That is all it takes to keep Angular happy. We said it would be clever!
|
||||
:marked
|
||||
That local template variable is intriguing. It's clearly easier to get to the textbox with that
|
||||
That template reference variable is intriguing. It's clearly easier to get to the textbox with that
|
||||
variable than to go through the `$event` object. Maybe we can rewrite our previous
|
||||
keyup example so that it uses the variable to get the user's input. Let's give it a try.
|
||||
+makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-2' ,'web/keyup_components.dart (v2)')(format=".")
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ p.
|
|||
specify the angular2 and browser packages as dependencies,
|
||||
as well as the angular2 transformer.
|
||||
Angular 2 is still changing, so provide an exact version:
|
||||
<b>2.0.0-beta.16</b>.
|
||||
<b>2.0.0-beta.17</b>.
|
||||
|
||||
+makeExample('quickstart/dart/pubspec.yaml', 'no-rewriter', 'pubspec.yaml')
|
||||
|
||||
|
|
|
|||
|
|
@ -105,10 +105,10 @@ code-example(format="." language="bash").
|
|||
“*take each hero in the `heroes` list, store it in the local `hero` variable,
|
||||
and make it available to the corresponding template instance*”.
|
||||
|
||||
The `#` prefix before "hero" identifies the `hero` as a local template variable.
|
||||
The `let` keyword before "hero" identifies the `hero` as a template input variable.
|
||||
We can reference this variable within the template to access a hero’s properties.
|
||||
|
||||
Learn more about `ngFor` and local template variables in the
|
||||
Learn more about `ngFor` and template input variables in the
|
||||
[Displaying Data](../guide/displaying-data.html#ngFor) and
|
||||
[Template Syntax](../guide/template-syntax.html#ngFor) chapters.
|
||||
|
||||
|
|
@ -167,7 +167,7 @@ code-example(format="." language="bash").
|
|||
:marked
|
||||
The parentheses identify the `<li>` element’s `click` event as the target.
|
||||
The expression to the right of the equal sign calls the `AppComponent` method, `onSelect()`,
|
||||
passing the local template variable `hero` as an argument.
|
||||
passing the template input variable `hero` as an argument.
|
||||
That’s the same `hero` variable we defined previously in the `ngFor`.
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ code-example(format="." language="bash").
|
|||
|
||||
// Our Tour of Heroes needs routing,
|
||||
// so we load the library in the `index.html` in a script tag immediately *after* the angular script itself.
|
||||
//+makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".")
|
||||
//makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".")
|
||||
:marked
|
||||
While we're in `index.html`, we add `<base href="/">` at the top of the `<head>` section.
|
||||
+makeExample('toh-5/dart/web/index.html', 'base-href', 'index.html (base href)')(format=".")
|
||||
|
|
|
|||
|
|
@ -94,15 +94,12 @@ table(width="100%")
|
|||
Here, `movie` is a user-defined local variable.
|
||||
td
|
||||
:marked
|
||||
### Local variables
|
||||
### Input variables
|
||||
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'local')(format="." )
|
||||
:marked
|
||||
In Angular 2, we have true template reference variables that are explicitly defined using the hash (#) symbol.
|
||||
In Angular 2, we have true template input variables that are explicitly defined using the `let` keyword.
|
||||
|
||||
Using a template reference variable, we can move data between elements in the template. We can use the template reference
|
||||
variable on the same element, on sibling elements, or on any child elements.
|
||||
|
||||
For more information see [Template Syntax](../guide/template-syntax.html#ref-vars).
|
||||
For more information see [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax).
|
||||
:marked
|
||||
[Back to top](#top)
|
||||
|
||||
|
|
@ -339,7 +336,7 @@ table(width="100%")
|
|||
|
||||
Notice the other syntax differences:
|
||||
The (*) before `ngFor` is required;
|
||||
the (#) identifies `movie` as a local variable;
|
||||
the `let` keyword identifies `movie` as an input variable;
|
||||
the list preposition is `of`, not `in`.
|
||||
|
||||
For more information see [Structural Directives](../guide/structural-directives.html).
|
||||
|
|
|
|||
|
|
@ -116,14 +116,14 @@ figure.image-display
|
|||
<a id="ngFor"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
## Showing an array property with NgFor
|
||||
## Showing an array property with ***ngFor**
|
||||
|
||||
We want to display a list of heroes. We begin by adding a mock heroes name array to the component,
|
||||
just above `myHero`, and redefine `myHero` to be the first name in the array.
|
||||
+makeExample('displaying-data/ts/app/app.component.2.ts', 'mock-heroes', 'app/app.component.ts (class)')(format=".")
|
||||
|
||||
:marked
|
||||
Now we use the Angular `NgFor` "repeater" directive in the template to display
|
||||
Now we use the Angular `ngFor` "repeater" directive in the template to display
|
||||
each item in the `heroes` list.
|
||||
|
||||
+makeExample('displaying-data/ts/app/app.component.2.ts', 'template','app/app.component.ts (template)')(format=".")
|
||||
|
|
@ -143,9 +143,8 @@ figure.image-display
|
|||
Learn more about this and `ngFor` in the [Template Syntax](./template-syntax.html#ngFor) chapter.
|
||||
|
||||
:marked
|
||||
Notice the `#hero` in the `ngFor` double-quoted instruction.
|
||||
The `#hero` is a [template input variable](./template-syntax.html#ngForMicrosyntax) declaration.
|
||||
The `let` keyword declares a local variable name named `hero`.
|
||||
Notice the `hero` in the `ngFor` double-quoted instruction;
|
||||
it is an example of a [template input variable](./template-syntax.html#ngForMicrosyntax).
|
||||
|
||||
Angular duplicates the `<li>` for each item in the list, setting the `hero` variable
|
||||
to the item (the hero) in the current iteration. Angular uses that variable as the
|
||||
|
|
@ -153,8 +152,8 @@ figure.image-display
|
|||
|
||||
.l-sub-section
|
||||
:marked
|
||||
We happened to give `NgFor` an array to display.
|
||||
In fact, `NgFor` can repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
|
||||
We happened to give `ngFor` an array to display.
|
||||
In fact, `ngFor` can repeat items for any [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
|
||||
object.
|
||||
:marked
|
||||
Assuming we're still running under the `npm start` command,
|
||||
|
|
@ -219,13 +218,13 @@ figure.image-display
|
|||
|
||||
In our example, we'd like to display a message if we have a large number of heroes — say, more than 3.
|
||||
|
||||
The Angular `NgIf` directive inserts or removes an element based on a truthy/falsey condition.
|
||||
The Angular `ngIf` directive inserts or removes an element based on a truthy/falsey condition.
|
||||
We can see it in action by adding the following paragraph at the bottom of the template:
|
||||
+makeExample('displaying-data/ts/app/app.component.ts', 'message')
|
||||
.alert.is-important
|
||||
:marked
|
||||
Don't forget the leading asterisk (\*) in `*ngIf`. It is an essential part of the syntax.
|
||||
Learn more about this and `NgIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
|
||||
Learn more about this and `ngIf` in the [Template Syntax](./template-syntax.html#ngIf) chapter.
|
||||
|
||||
:marked
|
||||
The [template expression](./template-syntax.html#template-expressions) inside the double quotes
|
||||
|
|
@ -236,7 +235,7 @@ figure.image-display
|
|||
.alert.is-helpful
|
||||
:marked
|
||||
Angular isn't showing and hiding the message. It is adding and removing the paragraph element from the DOM.
|
||||
That hardly matters here. It would matter a great deal from a performance perspective if
|
||||
That hardly matters here. But it would matter a great deal, from a performance perspective, if
|
||||
we were conditionally including or excluding a big chunk of HTML with many data bindings.
|
||||
|
||||
:marked
|
||||
|
|
@ -249,9 +248,9 @@ figure.image-display
|
|||
## Summary
|
||||
Now we know how to use:
|
||||
- **interpolation** with double curly braces to display a component property
|
||||
- **`NgFor`** to display a list of items
|
||||
- **`ngFor`** to display a list of items
|
||||
- a TypeScript class to shape the **model data** for our component and display properties of that model
|
||||
- **`NgIf`** to conditionally display a chunk of HTML based on a boolean expression
|
||||
- **`ngIf`** to conditionally display a chunk of HTML based on a boolean expression
|
||||
|
||||
Here's our final code:
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ include ../_util-fns
|
|||
|
||||
- displaying validation errors to users and enable/disable form controls
|
||||
|
||||
- sharing information among controls with template local variables
|
||||
- sharing information among controls with template reference variables
|
||||
|
||||
[Live Example](/resources/live-examples/forms/ts/plnkr.html)
|
||||
.l-main-section
|
||||
|
|
@ -228,7 +228,7 @@ ol
|
|||
We maintain that list internally (in `HeroFormComponent`).
|
||||
|
||||
We'll add a `select` to our
|
||||
form and bind the options to the `powers` list using `NgFor`,
|
||||
form and bind the options to the `powers` list using `ngFor`,
|
||||
a technique we might have seen before in the [Displaying Data](./displaying-data.html) chapter.
|
||||
|
||||
Add the following HTML *immediately below* the *Alter Ego* group.
|
||||
|
|
@ -478,7 +478,7 @@ figure.image-display
|
|||
:marked
|
||||
Why "ngForm"?
|
||||
A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property
|
||||
tells Angular how to link local variable to the directive.
|
||||
tells Angular how to link the reference variable to the directive.
|
||||
We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm".
|
||||
|
||||
This seems unintuitive at first until we realize that *all* control directives in the
|
||||
|
|
@ -576,7 +576,7 @@ figure.image-display
|
|||
|
||||
:marked
|
||||
We slipped in something extra there at the end! We defined a
|
||||
template local variable, **`#heroForm`**, and initialized it with the value, "ngForm".
|
||||
template reference variable, **`#heroForm`**, and initialized it with the value, "ngForm".
|
||||
|
||||
The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
|
||||
<a id="ngForm"></a>
|
||||
|
|
@ -666,10 +666,10 @@ figure.image-display
|
|||
- An Angular HTML form template.
|
||||
- A form component class with a `Component` decorator.
|
||||
- The `ngSubmit` directive for handling the form submission.
|
||||
- Template local variables such as `#heroForm`, `#name`, `#alter-ego` and `#power`.
|
||||
- Template reference variables such as `#heroForm`, `#name`, `#alter-ego` and `#power`.
|
||||
- The `[(ngModel)]` syntax for two-way data binding.
|
||||
- The `ngControlName` directive for validation and form element change tracking.
|
||||
- The local variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
|
||||
- The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
|
||||
- Controlling the submit button's enabled state by binding to `NgForm` validity.
|
||||
- Custom CSS classes that provide visual feedback to users about invalid controls.
|
||||
|
||||
|
|
|
|||
|
|
@ -1367,17 +1367,16 @@ figure.image-display
|
|||
Using the `*ngFor` syntax is much easier than writing out this expanded HTML ourselves.
|
||||
// #enddocregion star-template-ngFor-4
|
||||
|
||||
// #docregion ref-vars-1
|
||||
// #docregion ref-vars
|
||||
<a id="ref-vars"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
## Template reference variables
|
||||
|
||||
A **Template reference variable** is a reference to an DOM element or directive within a template.
|
||||
A **template reference variable** is a reference to an DOM element or directive within a template.
|
||||
|
||||
It can be used with native DOM elements but also with Angular 2 components - in fact, it will work with any custom web component.
|
||||
|
||||
// #docregion ref-vars-refs
|
||||
:marked
|
||||
### Referencing a template reference variable
|
||||
|
||||
|
|
@ -1385,7 +1384,7 @@ figure.image-display
|
|||
any child elements.
|
||||
|
||||
Here are two other examples of creating and consuming a Template reference variable:
|
||||
// #enddocregion ref-vars-refs
|
||||
// #enddocregion ref-vars
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'ref-phone')(format=".")
|
||||
// #docregion ref-vars-value
|
||||
:marked
|
||||
|
|
|
|||
Loading…
Reference in New Issue