Angular 10 Tutorial #26 - Property 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 an important feature in angular which is called property binding it's a type of one-way data binding where we connect the data from component to template in this will be able to bind the properties that is the html properties of dom elements we'll learn all about it in today's episode welcome back friends this is part 26 of the angular 10 complete tutorial playlist i have planned around 100 tutorials and right now we are on 26th episode uh i've covered all these topics that you see on your screen right now in details the github link for the notes is in the description box below make sure you check it out also please do make sure that you go through all these tutorials that i have covered in the previous episodes because you will have continuity in your learning and a better understanding of each of these features as we cover step by step thank you in advance let's go all right a quick note for our viewers who are joining us new what is data binding data binding is a way through which we connect the data from component to template or from template to the component right in two-way there are two types of data binding one-way data binding and two-way data binding one way data binding we have again component to view and view to component in the previous episodes we have covered interpolation today we will be covering about property binding let's get started so what is property binding property binding is technique that allows the user to bind properties of dom elements from component to view right the data flow is only one way that is from component to view this can be used for any and all properties of html like title placeholder inner html source etc right so how do we write it property is equal to expression in square brackets that is what we write it so let's see that in action that that's how we learn so let me create some notes for you this is episode number 20 6. property binding right so first thing we write the property binding in square brackets right like this so you will write the property name equal to expression right that you will evaluate it's a one way data binding right now we can bind any any slash multiple properties to an dom element right ah and it's not restricted to any particular dom element you can apply to any dom element all right so let's see that in action right um so if you see this is the let me run this application first for you and if you remember in the last episode we did this for loop right and we printed the values and we binded the interpolation with if else and with the for loop so now i'm going to add property binding to some of these attributes and dom elements let's let the application start real quick in the meanwhile please do like share comment and don't forget to subscribe to my channel to keep supporting me thank you in advance all right so let's go to our component class right and what we are doing is let's do let's not do anything in the component today let's keep it simple for your understanding so i have a div i have a link and this has a property right so what i'm going to do let's put a property called inner html equal to right so we created an object in the last episode user object if you remember and we printed those values so here we will write user object dot first name so see now i am not writing inside the div i am assigning to inner html which means it will automatically come inside this particular div right and that is the beauty of it because when you do a property binding this is a property inner html is a property which i am binding the data which is first name so when you run this code you will see that the first name is getting automatically pushed into this particular div similarly let's say ok so this is still building and let's say i want to see here i have put an example of title right let me show you that again by typing to you so here i am saying title equal to so what this means is that whenever user mouse overs on this particular record he should see contact dot contact id right so on mouse over you would see that right so you take the mouse over and you see one two three four right so if you see here this is the inner html that has come up now let's again put a title back to first name so basically you see it is they are just binding the properties here right in this case it's a title in this case it's a inner html if you are putting trying to put a source let's say image src right and you are sending the value from say the component right so i will show you just now okay so do we have an image let's see i don't think so but we can always get one so don't worry about that or this is a good example i'll just say um image url right if we don't have one then we should show alt equal to this right so let's save it and you will not see so let's give this image in the component right image url equal to test dot png it's not there now that's fine so i'm saying if it's not there give alternate which is img alt right and here mg alt is equal to this is missing image text okay so i have image url if this image is found displayed here if it's not there show the image alt so see this is a missing image text which is again coming from your component right so basically you are seeing that i am binding different types of data here right so you can bind anything that you want right in our case we have seen examples of inner html right we have done in our html example we saw image right source alt we did um title similarly you can also have placeholder um right and then you can have title so anything href you can have any property of html that you can think of right there is no restriction there is no restriction to what you do one more example before i leave you today if you want to put let's say style dot color equal to right let's say text color val let's define this here text color val is equal to say blue so now what am i binding so now you see the value is blue right here page count right so now you see page count value z you is blue color because i'm binding now this style right this is also property that i'm binding inside style i'm binding the color property right so this is essentially you get an idea that you can find any html property right so you see red now so in you can bind any combined any html property of dom elements right so i will leave it that up to you right uh and that's your homework right um and that is how uh it's it's pretty straight forward right uh there is nothing um that we don't um you you should not think of it that it's anything um so it it's basically uh let me put it this way that go to w3schools.com right and there you have html tutorial right check out property of html elements and whatever element you see you can use property binding that's the simplest way i can put it for you and what happens in real time applications right so let me show you now in real time applications let's say um some use cases i'll give you that i have worked so that way you will get some idea all right so some real time um use cases that i have used real time use cases right so one ah dynamic tables right ah dynamic table columns so let's say we have a grid uh where we are trying to add dynamic uh i'm trying to put together something like that so when you have dynamic table uh you have the columns you can choose the columns right and if you choose one you choose two you choose three so that way you call count right so column count um is another yet another important property of table that you can change um then we have also seen uh linking right linking of images image images this is from aws that i have seen three buckets right so this is yet another uh thing that i have seen where you bind of course binding of style properties is yet another commonly used property binding example so yeah those are the high level um you can say that property binding usage in real time applications i hope you like i hope you have learned something new if you have any doubts drop them in the comment section i will try and help you i'll see you in the next episode where we will learn about attribute binding and please don't forget to subscribe to my channel like the video also if you like my work please consider buying me a coffee at buy me a coffee dot com slash arc tutorials thank you so much i'll see you in the next episode of attribute binding

Channel: ARC Tutorials

Views: 6,608

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, 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 beginners tutorials, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular property binding tutorial

Id: zbCfU61QWDI

Length: 11min 41sec (701 seconds)

Published: Wed Nov 18 2020