A brief analysis of template reference variables in Angular

Continue learning in this articleAngular, and let you know about the template reference variables in Angular. I hope it will be helpful to everyone!

<input type="text" [value]="value" #name>

1. Template reference variables can be DOM elements, Angular components (directives), elements, TemplateRef, or even in Angualr templates A reference to a web component, and what it is depends on the element to which it is attached (without intervening directives) . As in the previous sample code, the template reference variable name is a reference to the DOM element <input>. [Related tutorial recommendation: "angular tutorial"]

<app-component #component [input]="variable"></app-component>
{{ component.input }}
{{ component.func() }}

Through the template reference variable, we obtained the instance reference of the app-component component, This allows us to easily access members inside the app-component component in the template.
2. Angular assigns values ​​to template variables based on the location of the variables you declare:

• If a variable is declared on a component, the variable will reference the Component instance.

• If a variable is declared on a standard HTML markup, the variable will reference that element.

• If you declare a variable on the <ng-template> element, the variable will reference a TemplateRef instance to represent this template .

• If the variable specifies a name on the right side, such as #var="ngModel", then the variable will refer to the element with this exportAs The directive or component of the name.

3. Using NgForm with template variables
The NgForm directive here demonstrates how to pass Reference the directive's exportAs name to reference different values. In the example below, the template variable itemForm appears three times in the HTML.

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>
 
<div [hidden]="!itemForm.form.valid">
  <p>{{ submitMessage }}</p>
</div>

* If there is no ngForm attribute value, the value referenced by itemForm will be the <form> element. The difference between Com and <code>Directive is that Angular will reference Component without specifying a property value, while Directive will not change This implicit reference (i.e. its host element). (I still don’t understand what it means...

After using NgForm, itemForm is a reference to the NgForm directive, you can Use it to track the value and validity of each control in the form.

Unlike the native <form> element, the NgForm directive has a form attribute. If itemForm.form.valid is invalid, then the form attribute of NgForm will let you disable the submit button.

. In fact, when using angular to write a list page, template reference variables are often used:

In the input box of the list component Reference the executeQuery() method of ngxQuery. Of course, if we want to use template reference variables in ts, we must use @ViewChild and @ViewChildren, which are the decorators provided to us by Angular.

We use templates in ts Get the variable name to get the ngxQuery component:

You can directly call the ExecuteQuery() method of ngxQuery in ts, and refresh the list when parameters are passed in:

(Related content about the ViewChild decorator can be found here******)

For parent and child components, template reference variables can also be used directly:

buGroup is an array in bugroupSelectComponent, which is passed as a template reference variable through the parent and child components:

## In the parent component ts Get the value of the subcomponent and use:

For more programming related knowledge, please visit:

Programming Video!!

The above is the detailed content of A brief analysis of template reference variables in Angular. For more information, please follow other related articles on the PHP Chinese website!