{"flag":true,"single":true,"pageTitle":"Template Reference Variable | Data Binding | Angular 15+","post":{"id":61,"user_id":"1","slug":"template-reference-variable-data-binding-angular-15--hlpv","title":"Template Reference Variable | Data Binding | Angular 15+","body":"

A Template reference variable is a reference to any DOM element, component or a directive in the template. It is a special kind of variable that you can declare in a template using the # symbol.<\/p>\r\n

demo.component.html<\/strong><\/p>\r\n

when input changed, its value print in <p><\/p>\r\n

<input type=\"text\" #myVariable (keyup)=\"0\">\r\n<p>{{ myVariable.value }}<\/p><\/code><\/pre>\r\n
use in Elements:<\/strong><\/p>\r\n
You can use a template reference variable to reference an element in the template and access its properties or methods. For example, if you have an input element, you can define a reference variable for it and use it to access its value:<\/p>\r\n
user.component.html<\/strong><\/p>\r\n
<input type=\"text\" #myInput>\r\n<button (click)=\"submit(myInput.value)\">Submit<\/button><\/code><\/pre>\r\n
user.component.js<\/strong><\/p>\r\n
export class UserComponent {\r\n  submit(val:string){\r\n    console.log(val);\r\n  }\r\n}<\/code><\/pre>\r\n
Components:<\/strong><\/p>\r\n
<app-child #myChild><\/app-child>\r\n<button (click)=\"myChild.doSomething()\">Do something<\/button><\/code><\/pre>\r\n
In this example, we have defined a template reference variable myChild <\/strong>for a child component app-child<\/strong>. When the button is clicked, we are calling a method doSomething()<\/strong> on the child component using myChild.doSomething().<\/strong><\/p>\r\n
Directives:
<\/strong><\/p>\r\n
<div myDirective #myDiv><\/div>\r\n<button (click)=\"myDiv.myDirectiveMethod()\">Call directive method<\/button><\/code><\/pre>\r\n
In this example, we have defined a template reference variable myDiv for a div element with the myDirective directive. When the button is clicked, we are calling a method myDirectiveMethod() on the directive using myDiv.myDirectiveMethod().<\/p>","category_id":"13","is_private":"0","created_at":"2023-03-28T00:04:37.000000Z","updated_at":"2023-03-31T05:00:20.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"A Template reference variable is a reference to any DOM element, component or a directive in the template. It is a special kind of vari - Template Reference Variable | Data Binding | Angular 15+ (Updated: March 31, 2023) - Read more about Template Reference Variable | Data Binding | Angular 15+ at my programming site [SITE]","categories":[]}