Skip to content

Commit 062fa76

Browse files
4javierthePunderWoman
authored andcommitted
docs: modified as per dylhunn suggestions (angular#45455)
angular#45455 (review) PR Close angular#45455
1 parent b9e7983 commit 062fa76

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

aio/content/guide/template-reference-variables.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@ In most cases, Angular sets the template variable's value to the element on whic
4747
In the previous example, `phone` refers to the phone number `<input>`.
4848
The button's click handler passes the `<input>` value to the component's `callPhone()` method.
4949

50-
The `NgForm` directive demonstrates getting a reference to a different value by referencing a directive's `exportAs` name.
51-
(Worth noting that `NgForm` directive gets silently applied by Angular on every `<form>` element unless one among `NoNgForm` and `FormGroup` is already set).
50+
The `NgForm` directive is applied by Angular on `<form>` elements. This example demonstrates getting a reference to a different value by referencing a directive's `exportAs` name.
5251

5352
<code-example header="src/app/hero-form.component.html" path="template-reference-variables/src/app/app.component.html" region="ngForm"></code-example>
5453

@@ -68,7 +67,8 @@ When declaring a template reference variable on an element without defining a va
6867
- **Component**: instance of the specific Component class
6968
- **NgTemplate**: TemplateRef
7069

71-
Keep in mind that just the presence of a directive applied to the element will **not** make the undefined variable default to an instance of that directive, it will still reference the native object.
70+
Referencing an element by its directive needs the directive `exportAs` property set as reference value.
71+
In case of unspecified variable value, the reference will return an `HTMLElement`, even if the element has one or more directive applied to itself.
7272

7373
## Template variable scope
7474

@@ -150,9 +150,9 @@ Verbose syntax of the same loop shows why:
150150
{{ ref.value }}
151151
```
152152

153-
It's easy to notice how interpolation trying to access property `value` of `ref` occurs outside of referenced element's parent template, making it unreachable.
153+
The interpolation trying to access property `ref.value` occurs outside of the referenced element's parent template, making it unreachable.
154154

155-
Moving the interpolation inside the template, will make the variable available referencing the right distinct value for every element the loop will render.
155+
Moving the interpolation inside the template makes the variable available. Now it references the correct distinct value for each element the loop renders.
156156

157157
```
158158
<ng-template ngFor let-i [ngForOf]="[1,2]">
@@ -161,7 +161,7 @@ Moving the interpolation inside the template, will make the variable available r
161161
</ng-template>
162162
```
163163

164-
This last snippet will show 2 `<input>` element with their respective value printed just after them
164+
This snippet shows 2 `<input>` elements, with their respective value printed.
165165

166166
### Accessing a template variable within `<ng-template>`
167167

0 commit comments

Comments
 (0)