Angular Tutorial - 10 - Template Reference Variables

[@anirudhadavalli8279]

Vishwas, I started learning angular from your tutorials. I always refer to your tutorials whenever I need to brush up the concepts. Thanks for the tutorial they are very useful.

[@sumeennaazshaik1214]

thanks man!! u made my work very easy .still toady in 2022 I found your tutorials are far better than latest version tutorials.

[@sayakbanerjee9990]

If you get error saying : Parameter 'value' implicitly has an 'any' type. Use: logMessage(value: any){ console.log(value) }

[@amirthak4743]

You helped me dood. Thanks!!

[@timz2917]

this guy has given me hope again

[@tofgau]

Vishwas, your videos are really great. Thanks a lot

[@geodamian495]

Great tutorial series, geat job Vishwas!

[@lokmanhosen4537]

Great tutorial and more great your explanation !!!

[@MuhammadAhmad-rh3fm]

You made it look so easy. Thank you so much

[@shubhammhatre4743]

don't know why but in upper version, in .ts file logMessage(value) was giving error, asking for provide type of value , so logMessage(value : any); worked for me

[@ashwini02329]

thnq bro... I was also stuck here !

[@MuhammadUmar-gw8mv]

Yes it did worked for me Thanks

[@sanskratiagrawal4334]

Awesome explaination sir.

[@pol-dev-v5y]

Thanks, great tutorial again! Your series are perfect.

[@TheGhanashyam123]

great teaching skills and rapid. Great set of tutorials

[@subramanyamchapala7362]

thank you very much sir. your teaching is really understandable and full pledged.

[@alimedani0296]

Thank you sir, for these tutorials

[@geomukkath5373]

I did the exact same thing but I got an error saying : Parameter 'value' implicitly has an 'any' type. So in my method definition I used the following : getValue(value: any){ console.log(value) } Now it works. I dont know why. Can someone enlighten me pls.

[@arvindkumarrana2312]

Because Typescript doesn't know what is the type of the value parameter that the getValue() method is getting. If you don't annotate some function argument, TypeScript assumes "any" and moves on. It is showing an error because if you look in the tsconfig.json file, 'strict' is set to true. It means strict type checking. In case you don't want to see such an error, you can set "noImplicitAny": false in the compilerOptions (in tsconfig.json) but that is not recommended because it is always useful to explicitly define the type of function arguments to avoid any issues. So since we have an input field that takes a text type value, I would suggest doing this - getValue(value: string){ console.log(value) }

[@FeelGoodChronicles]

Thanks man.....Its really helpfull

[@nan6shny]

Thank you for this amazing series

[@sonamohialdin3376]

So good tutorial thank you

[@Lost1nTranslation]

Thank you!

[@mohdmuzaffarahmed4923]

Weel explained sir

[@nitishtellakula7243]

Put value : any if ur getting an error : " parameter value implicitly has any type

[@kotireddy419]

Input variables can aslo access to ng model so why we used to template reference variable ?

[@davinderkambojthind]

Too good sir

[@damandeepsingh2460]

Can we create a template reference variable dynamically? Like inside *ngFor can we create #1, #2 reference variable?

[@mahendrashoor7641]

Great tutorials

[@MrDunatis]

is it not better to bind both text box and button, and use the values in the ts; instead of passing a reference variable? Because that way you have both values in the ts, which is better testable?

[@shubhigupta6926]

Error: src/app/test/test.component.ts:67:8 - error TS7006: Parameter 'value' implicitly has an 'any' type. 67 show(value){ getting this type of error in event binding, in angular tutorial 10. Plz tell me the solution.

[@ghassenjemiai]

change it to value:any

[@piraviperumal2544]

Great tutorials!!

[@sanyamkarnawat]

Parameter 'a' implicitly has an 'any' type. got this error on passing value

[@bugrae9341]

Easy and awesome thanks a lot :)

[@prinsyadavchukti9145]

How can we use the data of input textfield in all components.

[@tejasd5578]

Hii sir, how to print vishwas in webpage instead of console.

[@sarahthomas8506]

Hello i had a question, instead of using template reference variable , i have tried property binding with the "value" attribute of the input element with a class variable , and on button click i tried to log in the class variable, but it is not working. Could you please let me know where am i going wrong

[@Codevolution]

You need to use two way binding and not just property binding

[@sujithreddypatlolla2107]

Hello codevolution I have a question what if have mutiple input fields still it works with each reference varaiable or any alternative?

[@voalcalisticTanmay]

If you multiple elements and you require refer to them then you need to have unique reference variable for each of them that's it. Hope this helps. :)

[@Jai_Raj_007]

Superb👍

[@GeniusFromPakistan]

Btw this will not work if you use TemplateURL like people normally do this method will only work like what he is doing by calling function on the same TS page with Template on the same page

[@harukogaki]

So template reference variables are another way of defining hrefs?

[@nirajrewtani]

How to access multiple controls values

[@Venkatasurendra476]

Hello sir instead of log into console i want to display on the browser what is the solution for this

[@v.b.thorat1116]

document.write():

[@sid99varma]

You can do something like this inside your handleInput method- handleLog(inp){ this.greeting=inp.value; } Now you have assigned the value to greeting which was initially an empty string to the value the user entered inside the input field!

[@vishalsyoutube]

Use interpolation: Declare a public variable in TS Class, public value1 = ""; Follow the syntax as is shown in the video But inside logMessage(value) method, add: this.value1 = value; And below the element, write {{value1}} It worked for me

[@MZ-uv3sr]

One of the things I find confusing about Angular (and/or Typescript and Javascript) is all the symbols attached to names of things. # here. $ for observable. And why some variables end in !.

[@jagi7976]

Every programming language/framework is going to have their own syntactical idiosyncrasies. It’s very similar to learning grammar in school: why is it mouse and mice and not house and hice? Why they’re their there? Why do loose and lose not sound similar, but cruise and lose do? Its random stuff like that that you just have to memorize to be able to speak fluently. It’s for every programming language, and I would say JS/TypeScript is one of the ones where their syntax makes the most sense

[@rituphogat4950]

Can we access template reference variable without any event?

[@indieNik]

Good Question! To answer your question, Yes you can access the TRVs with the ViewChild decorator. Example: import {ViewChild, ElementRef} from '@angular/core'; @ViewChild('yourInputElement') yourInputRef: ElementRef; submit() { // Triggered on some other event console.log(this.yourInputRef.nativeElement.value); }

[@kesavanarayana724]

when you will make a angular project video?

[@sablala3116]

which version is this 8 or 5

[@ricko13]

gud

[@RahulSingh-ex2sm]

Vishwas U r awesome! Nice content and Great Explanation throughout the series!

[@jeganmuthu6962]

I am getting output as undefined, any one can plz help me out

[@humayunimtiaz9605]

the parameter of the method i.e "value" must be the same when you call the method i.e "input.value"

[@abhilashkokkonda1713]

This is very similar to event binding.. Why again the same concept here in Angular?

[@kidoo1567]

1:20

[@SofianMW]

thank you!