Angular 10 Tutorial #27 - Attribute Binding in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about attribute binding in the previous episode we learned about property binding make sure that you check that out because it's important to understand the difference between property binding and attribute binding the difference is however just a delicate thin line okay so a lot of new developers are newbies to angular development they get confused as to what is property binding what is attribute binding in what cases we should use which one i'll try and cover all of that answers for you so that it helps you give a better understanding so that you become better developer in you using these features of angular let's get started this is part 27 of the angular 10 complete tutorial playlist i am planning around 100 tutorials for you we are reaching close to 30 tutorials now the notes is in the github link i have put that link in the description box below make sure you check it out the topics that you are seeing on your screen right now i have covered all of them in detail with code and explanation so make sure you check it out because it's important to understand the fundamentals the foundations and above all mastering requires you to practice so make sure you check all of these tutorials out today we are in the 27th episode where we are learning about attribute binding all right so what is attribute binding attribute binding is a technique that allows the user to bind attributes of elements from component to view right it is unidirectional that is the data flows only in one way right from component to view and that's why it's part of data binding one way data binding right and can be used for existing properties or custom attributes right i'll explain you in just a bit as to what the difference is and which one you should prefer etc so the syntax for writing attribute binding is in the square bracket you will write attr that's mandatory right that's the prefix it has to go with a t t r dot attribute name equal to expression that's the syntax that's how you write attribute binding all right so that being said let's get into hands-on and i'll explain you some of the cool tricks and tricks of it um all right so let's open our editor okay so this is episode number 27 today we are learning about attribute bindings right so first thing attribute binding is a unidirectional which means it's one way data binding right one way data binding now it's the syntax the how the way you write it is in square brackets you'll write attr dot attribute name right equal to expression that's how we write the syntax and then the important thing that you should know about attribute binding is it's similar okay it's similar to property binding the functional the functionality may seem almost similar similar to property binding right so one of the most i would say one of the most important question asked in interviews is what is the difference right what is the difference between property binding and attribute binding attribute binding right so let's see that so in attribute als you will write like this ng class equal to expression right so this is your property binding in attribute we will always write it with attr dot this is attribute followed by the attribute name so you can give here class name right so it looks similar right i mean the way it behaves is same but how it how it is functioned at underlining is the difference so let me explain that so the first difference is obviously you write the property name directly in the square bracket and assign the expression whereas with attribute you will use using the prefix now why is this used because some properties some attributes are not natively supported by for supported for elements right one of the classic example that you will find is call span right so for the table we give call span right now this is not natively supported so if you try and put it inside square bracket like this right and say some call value it will give you error right but this has to be addressed only with attribute right value now the third difference is angular and encourages to use property binding right cases where you need to use you can use attribute right so that's another yet another question that is asked which is which one is preferred proper property binding or attribute binding so your answer is we will prefer property binding but there are some use cases where we have to use attribute binding right there we cannot escape but we have to use attribute binding now that being said let's do some hands-on examples so to make it even more clear to you okay so first thing let's start the application and what i am going to do here is i'm going to quickly throw in another table right and we'll write some tr write some td and say contact id give some names these are in it can be any name that you want right and let's put it another so this is just a simple um table with two rows all right so let it build let's give couple of minutes all right so it's up and running right so now we should be able to see our application and see the table let's check it out all right so let's reload and we see a table here which is contact name contact email address right um all right so nothing fancy so far but i'll just throw in a background color just so we know that we are talking about the same table and we have same understanding so you see i've put the this thing now what i'm going to do i'm going to delete this now you see how it looks so it looks like this so what we are going to do is we are going to say this call span equal to 2 now see it's working correctly when i give html right so now what we'll do we'll move this value to component so what we'll do we'll go to our component and let's throw in a variable and say call value equal to 2 right so here i am saying call value equal to 2 and here i'll just bind it and i'll say call value so see now it is not reflecting so what we will do uh let's put it in the interpolation right so if it now it will think it's a string so this also won't work so what we are going to do instead is we will make it a value and try and bind the data with our component variable now see it will give you error right it will give you error because it is a unknown property of your property see now it says can't bind to call span since it is inter known property of td now see it's a property right but in this case it is saying it is a it isn't a known property now this is a classic case where you cannot use property binding instead you have to use attribute binding right so let's do that now so now if i make it this is perfectly valid it will work without any errors now see and if you go to your code it is it will work let me show you one more time you don't add this attr and now it will tell you it is not a it isn't a known property right so to make it value we will say attribute dot call span right so now this will compile correctly so this is one of the classic example where a property you know that it exist but it isn't known to the dom yet right so there is html and there is dom that is document object model so the document object model doesn't know that this is a property that's why it gives you this error right i hope it's clear to you now um i think it it makes sense to you the difference between both the property and attribute binding do let me know if you have any questions or queries i will be happy to help you all right and then in the next episode we are covering event binding yet another very very important very very critical and without which you cannot build angular applications right so i hope you like this video if you do give a thumbs up don't forget to subscribe to my channel also if you like my work please consider buying me a coffee at buy me a coffee.com slash art tutorials thank you so much for joining i'll see you in the next episode

Channel: ARC Tutorials

Views: 5,529

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular attribute binding

Id: DUFsenigmLo

Length: 10min 43sec (643 seconds)

Published: Thu Nov 19 2020