Angular 2 | Tutorial 12 | One way data binding | Part 1 | TutorialsPoint [w/ subs]



00:00:00 – so what is going on everybody my name is
00:00:03 – maple and welcome to your 12 angular
00:00:06 – tutorial in which we're going to take a
00:00:08 – look at what data binding in angular is
00:00:11 – and how we can get it to work so to
00:00:14 – start off with again we're going to go
00:00:17 – simple because angularjs already had
00:00:21 – this data binding with these two curly
00:00:23 – braces and you could evaluate it like an
00:00:26 – expression one plus one or any sort of
00:00:29 – multiplication division call even
00:00:30 – JavaScript functions so we can pretty
00:00:34 – much say like result in here and we can
00:00:38 – say 1 plus 1 is equal to and result and
00:00:43 – what we can do is in our component we
00:00:46 – can define result as 2 and hit save and
00:00:50 – make sure you have the app running and
00:00:52 – you would get 1 plus 1 is equal to 2
00:00:54 – fair enough
00:00:55 – so that is one way and the other way if
00:00:59 – you want to like buying this this value
00:01:03 – to an attribute rather instead of just
00:01:09 – showing it raw on the page what you
00:01:11 – would do is pretty much realize
00:01:13 – input type text and the value is this
00:01:18 – thing right so this is one way right now
00:01:23 – the actual meaning of this thing is not
00:01:27 – that it just sets the value of this
00:01:30 – input type to input type takes the
00:01:33 – result but it rather sets the property
00:01:36 – the Dom property of input type takes the
00:01:39 – result and what that means actually is
00:01:41 – that it is monitoring this property and
00:01:44 – once the result is changed since the
00:01:48 – property is linked with this result and
00:01:53 – then you have changed the result
00:01:55 – variable then the property would also be
00:01:57 – changed right so the difference the
00:01:59 – difference actually if we take a look if
00:02:03 – this is your element right let's say
00:02:07 – this is any sort of element let us say
00:02:09 – this is input element C
00:02:11 – when you write in folder let's just make
00:02:20 – it 20 yep input type text and value
00:02:27 – sound value here right this value is
00:02:30 – being said as a property of this input
00:02:33 – box for the first time and later on when
00:02:36 – the user just modifies it this property
00:02:39 – right here
00:02:40 – this Dom Dom attribute attribute remains
00:02:44 – still the same but when you access it
00:02:47 – where JavaScript like I don't know my
00:02:52 – input load value by getting this input
00:02:55 – reference then what happens is that you
00:02:58 – are now accessing the property of this
00:03:00 – Dom object right so what angular is
00:03:04 – doing right here is that it's not
00:03:06 – setting its value it's it's not setting
00:03:09 – the attribute value to the result but
00:03:14 – it's rather setting the property of the
00:03:16 – storm of s*** to result and what we can
00:03:20 – do in order to see that it's working is
00:03:23 – that very much let's just go ahead and
00:03:26 – create a constructor and right here
00:03:29 – let's aspire set timeout which really
00:03:34 – must save that result is equal to 50
00:03:43 – right and if you save this and change
00:03:47 – the set timer to two seconds and save
00:03:49 – this and you can see that after 2
00:03:53 – seconds it changes from two to fifty now
00:03:55 – again if it were just echoing out the
00:04:00 – value then it would just remain at to
00:04:03 – here but it's actually binding to the
00:04:05 – property of the element so it changes
00:04:07 – the value to 50 when the result changes
00:04:10 – right so this was an important thing to
00:04:12 – understand to know how binding works and
00:04:16 – angular and another way to actually
00:04:19 – achieve the same thing is to make use of
00:04:21 – the square brackets and again looks like
00:04:25 – blank text is not happy but we're still
00:04:28 – going to go with it so these square
00:04:30 – brackets and that interpolation syntax
00:04:33 – with these curly braces it's pretty much
00:04:35 – same there's a slight difference I would
00:04:37 – just let you know about that by the end
00:04:39 – of the tutorial but for now the square
00:04:42 – brackets pretty much stays again that
00:04:44 – because if you do something like this
00:04:46 – then angular has no idea if you actually
00:04:48 – want the value to have to be result or
00:04:50 – you want to let anger take control of
00:04:56 – this value so the square bracket is
00:04:58 – again a syntactic sugar it is still
00:05:00 – angular that we want you to be in
00:05:02 – control and just parse out what we have
00:05:06 – and right here it's probably some
00:05:08 – JavaScript and just make sense for it
00:05:10 – so we save it and we see concede again
00:05:14 – we get 2 and 50 and again it's just
00:05:17 – binding to the property
00:05:19 – okay so we'll actually the difference
00:05:22 – between binding where the square
00:05:25 – brackets and binding where these curly
00:05:27 – braces is pretty much that these curly
00:05:32 – braces what they do when you do
00:05:33 – something like this
00:05:35 – they actually evaluate whatever inside
00:05:38 – it is and convert it to string right so
00:05:42 – that is one way to understand this so if
00:05:46 – you have something like I don't know an
00:05:51 – array 1 2 3 so you know that for arrays
00:05:54 – they just pretty much turn into
00:06:00 – something like this on conversion on
00:06:02 – strings so it will just show you that
00:06:05 – but with the the square notation what
00:06:09 – happens is that the result is just
00:06:11 – evaluated as it is but it's not
00:06:14 – converted to string right so that's
00:06:18 – pretty much the only difference between
00:06:20 – these notations and I guess this one
00:06:23 – looks a bit of cleaner than the that
00:06:27 – curly brace notation but again it's up
00:06:30 – to you whatever you prefer both are
00:06:32 – correct
00:06:33 – right so that was a real
00:06:36 – – real quick tutorial on one-way
00:06:40 – data-binding
00:06:41 – with the angular and it's actually half
00:06:45 – the part of one-way data-binding because
00:06:48 – we have not seen how we can one-way
00:06:51 – data-binding from the view to the
00:06:55 – component script right so we'll just
00:06:57 – take a look at that in the next tutorial
00:06:58 – so that is all for this one and if you
00:07:01 – liked it then don't forget to subscribe
00:07:02 – and thank you for watching I'll see you
00:07:04 – then in the next one


Video Url:
http://youtu.be/x9cL98ur1go

Comments

comments