Angular 17 Tutorial #23 - Data Binding | Angular 17 Tutorial For Beginners

hi friends welcome back to AR tutorials this is angular 17 full tutorial series for absolute beginners as well as expert developers joining us from previous versions of angular in today's episode we will start learning a mini feature which is data binding in angular 17 it's a very very important concept of how data is stitched together from component to template and to CSS very very interesting very very basic very very fundamental and if you are a new developer here you must know all these Concepts if you have missed out on the first awesome 22 Episodes where I've covered a lot of breaking and new changes in angular 17 make sure that you go through them in order to learn and master angular 17 with me today we are learning about data binding in angular data binding is a fundamental Concept in angular that allows us to EST establish a connection between the applications data and the U UI which is the template or the user interface now there are several types of data binding that uh provided in angular namely interpolation property binding event binding and two-way data binding in angular you will see some new syntaxes that we'll write one of which is interpolation all right it's written between two double curly open braces and double curly closed braces okay this this particular binding allows us to embed expressions in the template it updates The View with the components data okay don't worry about in detail because I have I'll be dedicating each episode for all of this where we will do lots of use cases Hands-On activity today's topic I'll cover only the high level Theory so that you understand and then we progress into writing code so remember interpolation is nothing but oneway data binding where we will bind the component data which is from class to the UI the second is the property binding property binding is also oneway data binding that allows us to bind a value to bind the value of a component property to the HTML element it will update the view with the components data property binding can be used to set attributes of HTML elements it allows Dynamic modification of element attributes similarly there's one more way of data binding which is event binding event binding is nothing but one-way data binding that binds an event in the template to a method I will I'll give you a overview of all this in the code right now but we will Deep dive uh each one of this into the next episodes as we progress now two-way data binding two-way data binding combines property binding and event binding it allows data to flow from component to The View and from view to the component okay I know if you're new here these words may be little complicated or complex but trust me it's the most easiest thing and I'm going to show you right now by creating some noes and explanation I hope that should help you understand the basics all right so this is episode number 23 we are learning data finding all right so let's close this here we don't need this today all right so data binding so remember there are one way data binding and there is two-way data binding all right now in one way data binding the first one you will see is called interpolation okay this means you binding if if you open any component you would see four files for it component spec CSS and HTML so oneway data binding means from component class to template or you can say HTML now you can see this is the component this is the template okay HTML is your template this is the class okay this is the class because you write the class here so this is a component this will be for each component okay open any component you would see these things common component spec scss HTML now interpolation means from component to template you are mapping the data and displaying data in in the template same way you have property binding now property binding means in the template you will have some HTML element let's say you have HTML element link here now this is a property right same way if you open say input input type equal to text here type is the property same way if you say d class equal to C1 here class is a class is a property okay so think of it like an attribute okay property is nothing but an attribute now in this case when you say property binding you are saying from component class to templates elements property or attribute okay now this is the second the third is event binding now what is event binding these in the HTML or the template you might have some events that you want to bind let's say d on Mouse over right this is an event and we'll say uh highlight highlight Rec right so what is this this is a event right event is nothing but JavaScript event it can be anything on Mouse over on input on blur on click on drag on leave on drop on focus on error on key up key load down on play pointer any of these is an event you are binding an event from component which is again your class to templates elements event okay event or anything that you interact with these are the three different types of oneway data finding we will do more and more Hands-On coding as we move in the series today's topic is to explain you what why two-way data binding means data will flow back from template that is from HTML to the component and vice versa so it means data will flow from component class to template and and back from template to component class okay when I say template the HTML or the UI whatever you call it okay all right so see data binding means from component class class from component class to the HTML remember this one line from component class to template property binding means from class to templates property okay or the attribute event binding means from component class to templates event two-way data binding means data will flow from component to template template to component why because you will need you will need data from user in terms of say forms right you might your application will have Dynamic forms where you want to collect the data send it back you might want to do some um you know data mapping from component Etc it can be anything there can be many use cases but most importantly think of forms let's say contact us form add a new user edit dat a user where you need to set collect the data from user send it back to database so you need two-way communication from component to template template to component right I hope the concept of data binding is clear because in the next episode we will start implementing all these things that we discussed now starting next episode I will first show you different use cases of interpolation then property binding then even binding and then we'll do two-way data binding okay I hope the concept is clear because like I said in the next episode I'll cover data binding oneway data binding interpolation I'm trying to cover each Topic in angular 17 in detail for you so that you can learn and master angular with me I hope you like the series if you do please do hit that like button share subscribe to my channel thank you

Channel: ARCTutorials

Views: 3,392

Keywords: angular 17 tutorial for beginners, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, standalone components, angular standalone components

Id: ww3CTRy225I

Length: 9min 59sec (599 seconds)

Published: Mon Mar 18 2024