mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
4a9f7daf37
This commit removes all the docregion tags in examples that are not being referenced in any doc. PR Close #40479
107 lines
3.4 KiB
HTML
107 lines
3.4 KiB
HTML
<h1>Template reference variables</h1>
|
|
|
|
<div>
|
|
<h2>Pass value to an event handler</h2>
|
|
<p>See console for output.</p>
|
|
<!-- #docregion ref-phone -->
|
|
<!-- #docregion ref-var -->
|
|
<input #phone placeholder="phone number" />
|
|
<!-- #enddocregion ref-var -->
|
|
|
|
<!-- lots of other elements -->
|
|
|
|
<!-- phone refers to the input element; pass its `value` to an event handler -->
|
|
<button (click)="callPhone(phone.value)">Call</button>
|
|
<!-- #enddocregion ref-phone -->
|
|
</div>
|
|
|
|
<div>
|
|
<input ref-fax placeholder="fax number" />
|
|
<button (click)="callFax(fax.value)">Fax</button>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div>
|
|
<h2>Template reference variable with disabled button</h2>
|
|
<p>btn refers to the button element.</p>
|
|
<button
|
|
#btn
|
|
disabled
|
|
[innerHTML]="'disabled by attribute: ' + btn.disabled"
|
|
></button>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<h2>Reference variables, forms, and NgForm</h2>
|
|
<!-- #docregion ngForm -->
|
|
<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
|
|
<label for="name">Name <input class="form-control" name="name" ngModel required />
|
|
</label>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
|
|
<div [hidden]="!itemForm.form.valid">
|
|
<p>{{ submitMessage }}</p>
|
|
</div>
|
|
|
|
<!-- #enddocregion ngForm -->
|
|
|
|
|
|
<p>JSON: {{ itemForm.form.value | json }}</p>
|
|
|
|
<hr />
|
|
|
|
<h2>Template Reference Variable Scope</h2>
|
|
|
|
<p>This section demonstrates in which situations you can access local template reference variables (<code>#ref</code>).</p>
|
|
|
|
<h3>Accessing in a child template</h3>
|
|
<!-- Accessing a template reference variable from an inner template
|
|
works as the context is inherited. Try changing the text in the
|
|
input to see how it is immediately reflected through the template
|
|
reference variable. -->
|
|
|
|
<div class="example">
|
|
<!-- #docregion template-ref-vars-scope1 -->
|
|
<input #ref1 type="text" [(ngModel)]="firstExample" />
|
|
<span *ngIf="true">Value: {{ ref1.value }}</span>
|
|
<!-- #enddocregion template-ref-vars-scope1 -->
|
|
</div>
|
|
|
|
<!-- In this case there's a "hidden" ng-template around the
|
|
span and the definition of the variable is outside of it. Thus, you access a template variable from a parent template (which is logical as the context is inherited). -->
|
|
|
|
<p>Here's the desugared syntax:</p>
|
|
<pre><code [innerText]="desugared1"></code></pre>
|
|
|
|
<h3>Accessing from outside parent template. (Doesn't work.)</h3>
|
|
<!-- Accessing the template reference variable from outside the parent template does
|
|
not work. The value to the right is empty and changing the
|
|
value of the input will have no effect. -->
|
|
|
|
<div class="example">
|
|
<input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />
|
|
<!-- <span>Value: {{ ref2?.value }}</span> -->
|
|
<!-- uncomment the above and the app breaks -->
|
|
</div>
|
|
|
|
<p>Here's the desugared syntax:</p>
|
|
<pre><code [innerText]="desugared2"></code></pre>
|
|
|
|
<h3>*ngFor and template reference variable scope</h3>
|
|
|
|
<!-- The template is instantiated twice because *ngFor iterates
|
|
over the two items in the array, so it's impossible to define what ref2 is referencing. -->
|
|
|
|
<pre><code [innerText]="ngForExample"></code></pre>
|
|
|
|
<h3>Accessing a on an <code>ng-template</code></h3>
|
|
|
|
See the console output to see that when you declare the variable on an <code>ng-template</code>, the variable refers to a <code>TemplateRef</code> instance, which represents the template.
|
|
|
|
<!-- #docregion template-ref -->
|
|
<ng-template #ref3></ng-template>
|
|
<button (click)="log(ref3)">Log type of #ref</button>
|
|
<!-- #enddocregion template-ref -->
|