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



00:00:00 – so what is going on everybody my name is
00:00:03 – Minho and welcome to your 13th angular
00:00:09 – tutorial I guess and in this tutorial
00:00:11 – we're going to take a look is add
00:00:14 – one-way data-binding again but from this
00:00:17 – time from the view to the script so in
00:00:21 – the last tutorial we took a look at how
00:00:24 – we can do when we data binding from the
00:00:28 – script to the view and I actually forgot
00:00:32 – to tell you one last thing in that and
00:00:34 – that is instead of making use of these
00:00:37 – square notations what else you can do is
00:00:39 – make use of this bind while you think so
00:00:43 – this bind and then this absolute this
00:00:46 – square attribute both means the same
00:00:48 – things right so it doesn't matter
00:00:50 – similarly with for this one we're
00:00:55 – binding for view to the script what we
00:00:58 – need is some sort of user interactivity
00:01:00 – obviously because that's how the view
00:01:03 – would send some data to the script like
00:01:05 – user interacted with this button or user
00:01:08 – entered some text into this input field
00:01:10 – and all that stuff so to do that what
00:01:12 – we're going to make use of is these
00:01:15 – curly brackets or just not really curly
00:01:19 – they're circular brackets right so
00:01:22 – inside this we would write our events
00:01:25 – name so let's just say this is key down
00:01:27 – and for this this curly bracket the
00:01:31 – circular bracket rather actually tells
00:01:34 – angular that we want you to handle this
00:01:36 – attribute or rather this event and the
00:01:39 – right here is to say we just say our my
00:01:43 – function anything like that we can just
00:01:47 – call it right so we just go back to our
00:01:50 – component and we defined my function and
00:01:55 – we can very max a console log this was
00:01:59 – fired right and we can just take a look
00:02:03 – in the browser console and if I write
00:02:07 – something you can see our event
00:02:10 – successfully fires every time we
00:02:13 – write something so this fires on the key
00:02:15 – down and again if you're not comfortable
00:02:18 – with these brackets what you can do is
00:02:21 – instead of writing these brackets you
00:02:23 – can say on target now remember for the
00:02:28 – echoing out of value or rather showing
00:02:30 – the value we were making use of bind but
00:02:33 – for this event handling for the events
00:02:39 – or rather one-way data-binding when we
00:02:41 – are sending data back to the script we
00:02:44 – want to make you love this on keyword
00:02:46 – right here right so if you save this and
00:02:48 – take a look again it's one on the same
00:02:51 – thing now angular actually gives you an
00:02:55 – event here as well so that you can just
00:02:59 – access what just happened so if you take
00:03:03 – a look at this event and we can very
00:03:07 – much this log this what we are getting
00:03:09 – and take a look in the browser and here
00:03:12 – if I enter some key you see that we get
00:03:13 – this keyword key boat event and
00:03:16 – accordingly we can just decide which
00:03:20 – keys were pressed like it saves me false
00:03:23 – for control key so if I press control
00:03:25 – and press some other key so you know you
00:03:29 – could just pretty much create some
00:03:30 – combinations in here with this function
00:03:33 – and take accordingly and take the
00:03:35 – actions accordingly right so let's say
00:03:40 – if you want to maybe like I don't know
00:03:45 – if that's not really the best way to
00:03:47 – explain this but let's just say if we
00:03:50 – have something like my custom spring in
00:03:55 – here spring and it's just set to blank
00:04:02 – for now and we can just get rid of all
00:04:05 – these other things I don't know why do
00:04:06 – we have right and what we can say is my
00:04:13 – custom strength
00:04:18 – I don't know let's say event target dot
00:04:23 – value let's say we are just appending
00:04:25 – whatever the users typing we do not care
00:04:27 – if the user deleted it right and we can
00:04:31 – say this thing right and we can just
00:04:35 – display it in the browser there and yep
00:04:39 – so let's just say if I write something
00:04:40 – like 1 2 3 4 5 6 7 so you can see that
00:04:46 – it's becoming jumble so what we can do
00:04:49 – is say something like now we can say all
00:04:59 – rather actually is just stick with us so
00:05:02 – for them make use of the new line so
00:05:06 – okay so it's parsing our HTML so we're
00:05:10 – going to see that in source you can see
00:05:13 – that we get a new text in every line
00:05:16 – even if I remove the text right so you
00:05:23 – can see that pretty much that's how we
00:05:26 – are able to send data from our view to
00:05:32 – the script file by one-way data-binding
00:05:35 – and again you can just go with the
00:05:38 – bracket notation one if you want it's up
00:05:41 – to you again so that is not pretty much
00:05:44 – one-way data-binding works in a clerk at
00:05:46 – least and that's all for this one and
00:05:49 – the next one we're going to take a look
00:05:50 – at how we can do two-way data-binding
00:05:52 – and actually what that would mean rather
00:05:55 – so that's all for this one and if you
00:05:58 – liked it then don't forget subscribe and
00:06:00 – thank you for watching I'll see you then
00:06:02 – in the next one


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

Comments

comments