Template Reference Variable | Data Binding | Angular 12+
In this lecture you are going to learn about template reference variable, also called as local reference variable and what is its use.
A template reference variable is simply a variable which stores a reference to an HTML element in the DOM, or to a component or directive. Using reference variable, we can pass around that HTML element, component or directive in the template or to component class and use it.
Let's understand template reference variable with some examples.
Пікірлер: 25
Your lectures helping lot. Its boon for developers like me. Please keep your good work going !!!
nice series please continue with advance topic also ......thanks for making this.
object?.property is not the nullish coalescing operator but the optional chaining operator. Nullish coalescing is the double question mark: const neverUndefined = a ?? "Hello, World!";
@procademy
Жыл бұрын
Yes you are right 👍🏻
Amazing course
very good tutorial!!! THNX!!!
Hi Sir, It's really helpful series. I am not able to find your JavaScript series which you mentioned in this video. can you please share link? Thank you.
Very Great Series.... Very very thankful..😍🥰🥰🥰🥰😍 the Only Request is if possible upload the initial code that is code without any changes(Essential HTML, CSS FILE, TS files). Thanku...
with @output we can get value from child, and now using templete reference also we get value from child, so which is the best method to use?
@charlottewastestime
5 ай бұрын
Did you get an update on this? I assume the reference variable is not accessible from the parent’s TS file (app.component.ts). So, if you need to handle the data of ‘selectedCostumer’ in the parents ts-file, you would need to define @output instead. update: is seems you can get the reference variable from the template in the ts file via @viewChild.
How to use directives
in customer.ts file, I'm getting this error: Property 'customerNo' has no initializer and is not definitely assigned in the constructor etc for all properties for this export class Customer { customerNo: number; name:string ; address:string; city:string; country:string; } when I changed it to: export interface Customer { customerNo: number; name:string ; address:string; city:string; country:string; } it is working fine
@ashishrai8870
7 ай бұрын
for that apart from import you have to mention it in constructor also
Can you please tell me if we need to show both filter and search if conditions how to use them in same div
@TheZjumpers
Жыл бұрын
Hi, I know the question is a month old but I'm answering because many other viewers may have the same question with you. To achieve that, you can wrap again the element inside an element (that would be a child element to our original element). Then you can apply the first *ngIf directive inside the child element and the second *ngIf (the one that applies the filter) inside our nested element.
@maheshsirsat1811
Жыл бұрын
*ngIf=" (currentradiovalue==='All' || currentradiovalue===p.type) && (currentsearchvalue=='' || p.series_name.toLowerCase().includes(currentsearchvalue) )" just use bracket and 'and ' operator
done
export class Customer { customerNo: number; name: string; address: string; city: string; country: string; } got an error here selectedCustomer; and also here
@chilhoankwon9073
Жыл бұрын
I guess that you are using new angular version(15). export class Customer { customerNo!: number; name!: string; address!: string; city!: string; country!: string; } It would work.
@johnxina8873
Жыл бұрын
@@chilhoankwon9073 what would be the solution for the selectedCustomer;
@chilhoankwon9073
Жыл бұрын
@@johnxina8873 export class CustomerListComponent { selectedCustomer: any;
@oluwaseunoyenuga6641
Жыл бұрын
@@chilhoankwon9073 thank you so much.. but how do you know what is new what article can i read
@PriyasLifesyle
11 ай бұрын
thank you i tried this and worked but can u explain why ! sign@@chilhoankwon9073
sound quality not good