You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aio/content/guide/template-reference-variables.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -47,8 +47,7 @@ In most cases, Angular sets the template variable's value to the element on whic
47
47
In the previous example, `phone` refers to the phone number `<input>`.
48
48
The button's click handler passes the `<input>` value to the component's `callPhone()` method.
49
49
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.
@@ -68,7 +67,8 @@ When declaring a template reference variable on an element without defining a va
68
67
-**Component**: instance of the specific Component class
69
68
-**NgTemplate**: TemplateRef
70
69
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.
72
72
73
73
## Template variable scope
74
74
@@ -150,9 +150,9 @@ Verbose syntax of the same loop shows why:
150
150
{{ ref.value }}
151
151
```
152
152
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.
154
154
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.
156
156
157
157
```
158
158
<ng-template ngFor let-i [ngForOf]="[1,2]">
@@ -161,7 +161,7 @@ Moving the interpolation inside the template, will make the variable available r
161
161
</ng-template>
162
162
```
163
163
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.
165
165
166
166
### Accessing a template variable within `<ng-template>`
0 commit comments