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

  • @SrinathJog
    @SrinathJog Жыл бұрын

    Your lectures helping lot. Its boon for developers like me. Please keep your good work going !!!

  • @mdshajahan6314
    @mdshajahan63142 жыл бұрын

    nice series please continue with advance topic also ......thanks for making this.

  • @sourandbitter3062
    @sourandbitter3062 Жыл бұрын

    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

    @procademy

    Жыл бұрын

    Yes you are right 👍🏻

  • @vakul_18k55
    @vakul_18k552 жыл бұрын

    Amazing course

  • @nasossoulis9495
    @nasossoulis9495 Жыл бұрын

    very good tutorial!!! THNX!!!

  • @pallaviamrale4218
    @pallaviamrale4218 Жыл бұрын

    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.

  • @anandk3807
    @anandk3807 Жыл бұрын

    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...

  • @dharshangowda5523
    @dharshangowda5523 Жыл бұрын

    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

    @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.

  • @narenk8077
    @narenk80772 жыл бұрын

    How to use directives

  • @81ghosh
    @81ghosh10 ай бұрын

    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

    @ashishrai8870

    7 ай бұрын

    for that apart from import you have to mention it in constructor also

  • @charugundlalatha192
    @charugundlalatha192 Жыл бұрын

    Can you please tell me if we need to show both filter and search if conditions how to use them in same div

  • @TheZjumpers

    @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

    @maheshsirsat1811

    Жыл бұрын

    *ngIf=" (currentradiovalue==='All' || currentradiovalue===p.type) && (currentsearchvalue=='' || p.series_name.toLowerCase().includes(currentsearchvalue) )" just use bracket and 'and ' operator

  • @maheshsirsat1811
    @maheshsirsat1811 Жыл бұрын

    done

  • @charlydalagon
    @charlydalagon Жыл бұрын

    export class Customer { customerNo: number; name: string; address: string; city: string; country: string; } got an error here selectedCustomer; and also here

  • @chilhoankwon9073

    @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

    @johnxina8873

    Жыл бұрын

    @@chilhoankwon9073 what would be the solution for the selectedCustomer;

  • @chilhoankwon9073

    @chilhoankwon9073

    Жыл бұрын

    @@johnxina8873 export class CustomerListComponent { selectedCustomer: any;

  • @oluwaseunoyenuga6641

    @oluwaseunoyenuga6641

    Жыл бұрын

    @@chilhoankwon9073 thank you so much.. but how do you know what is new what article can i read

  • @PriyasLifesyle

    @PriyasLifesyle

    11 ай бұрын

    thank you i tried this and worked but can u explain why ! sign@@chilhoankwon9073

  • @nilanjanroychoudhury3094
    @nilanjanroychoudhury30942 жыл бұрын

    sound quality not good