Coding

Angular 2 Tutorial (2016) – Angular 2 & jQuery (use with caution!)

  • 00:00:00 hi welcome back everyone in this video
  • 00:00:03 we're going to do something where I will
  • 00:00:06 say straight at the beginning be careful
  • 00:00:10 when doing it we're having a look at how
  • 00:00:13 we can use jQuery in an angular 2
  • 00:00:16 application now it is possible and there
  • 00:00:19 are some use cases where you actually
  • 00:00:22 need that or it might be that but be
  • 00:00:26 aware that it kind of goes against
  • 00:00:29 nature of using framework like angular 2
  • 00:00:32 to then mess around with jQuery because
  • 00:00:35 anyone who kind of is responsible for
  • 00:00:39 rendering and manipulating the DOM and
  • 00:00:41 if you're interfering with jQuery you
  • 00:00:44 might get some unwanted results
  • 00:00:46 nonetheless as I said there might be
  • 00:00:49 some use cases where you actually need
  • 00:00:52 shape wearing or where it really helps
  • 00:00:55 you or more it's a little workaround and
  • 00:00:58 it is fine to use jQuery and therefore I
  • 00:01:00 once you show you how easy this use
  • 00:01:03 jQuery in an angular 2 application but
  • 00:01:07 again when using it be careful and think
  • 00:01:11 about it if there isn't a number
  • 00:01:13 possibility without jQuery so enough of
  • 00:01:17 the warnings what are we going to do or
  • 00:01:19 how are we going to do that actually
  • 00:01:22 implementing jQuery in an angular 2
  • 00:01:24 application is pretty pretty simple
  • 00:01:26 first step is as you can see I get my
  • 00:01:29 running empty boilerplate here first
  • 00:01:33 step is to head over to what you Shea
  • 00:01:35 query to the website and here I just
  • 00:01:39 want to grab those links here not going
  • 00:01:44 to download it right now
  • 00:01:45 and my index.html file I'll copy them in
  • 00:01:51 right above all the aberrant voice now
  • 00:01:56 obviously
  • 00:01:56 inserting them at the body or
  • 00:01:58 downloading them first place would be
  • 00:02:00 better but that's just how you integrate
  • 00:02:02 right so not going to mess around with
  • 00:02:06 all the important stuff here now what
  • 00:02:09 I'm going to do is I will create a new
  • 00:02:10 component which which is called
  • 00:02:13 Woori component and in this file and is
  • 00:02:19 newly created file well I will as always
  • 00:02:21 create the class micro point which will
  • 00:02:24 the call jQuery component and now to
  • 00:02:31 actually make it a component I will add
  • 00:02:34 my my decorator my component decorator
  • 00:02:38 and as always make sure you got this
  • 00:02:41 import of component from angular 2 core
  • 00:02:44 it's automatically done for me in my IDE
  • 00:02:46 and that what I want to do here is I'm
  • 00:02:49 just select ER and it will just call it
  • 00:02:52 my shake worried kind of using that my
  • 00:02:56 prefix to make sure that I'm not
  • 00:02:58 interfering with any other third party
  • 00:03:01 packages or might exclude or anything
  • 00:03:04 like that so that's a good behavior to
  • 00:03:06 use a prefix and then um well I need a
  • 00:03:11 template and this template all I want to
  • 00:03:14 do is just to show how to use jQuery I
  • 00:03:19 let a button when we clicked its button
  • 00:03:22 I want to show an alert and now yes I'm
  • 00:03:24 aware I could just do this with pure
  • 00:03:27 angular 2 but it's just to show how to
  • 00:03:30 use jQuery now there is one thing I have
  • 00:03:43 to do to use jQuery in this file without
  • 00:03:46 getting all kinds of compilation or
  • 00:03:49 typescript errors and as I declare a
  • 00:03:52 variable up here called jQuery type 1
  • 00:03:58 and what this does is it no type water
  • 00:04:03 type any excuse me what this does is it
  • 00:04:06 basically tells typescript
  • 00:04:08 hey I'm using this shake where you are
  • 00:04:10 and even though it's not initialized in
  • 00:04:13 this file it is existing that's kind of
  • 00:04:16 the translation of it and now what I can
  • 00:04:18 do in my in my class I will inject a
  • 00:04:22 reference to to my Dom so to say
  • 00:04:26 in this template here I can do this in a
  • 00:04:29 chip in a in an angular 2 component by
  • 00:04:32 just binding it to this private property
  • 00:04:36 here and I'm injecting a reference to
  • 00:04:39 this element so to this component in the
  • 00:04:42 Dom to HTML code it's able to say by
  • 00:04:45 using element ref here in my constructor
  • 00:04:48 this will give me such a reference and
  • 00:04:50 now I can for example in the on in it
  • 00:04:54 lifecycle hook which I'm implementing
  • 00:04:57 here or an implementing their interface
  • 00:04:59 and then the respective method ng on in
  • 00:05:02 it and in this method what I will do is
  • 00:05:05 I'll use my T Shea query
  • 00:05:09 umm.yeah variable kind of a grid here so
  • 00:05:12 that's like the dollar sign you can
  • 00:05:14 think of of it like this so if you're
  • 00:05:16 used to using the dollar sign then you
  • 00:05:18 would specify here your selector like an
  • 00:05:21 element which has a ID now in this case
  • 00:05:24 what we're going to do is we're going to
  • 00:05:26 select our element reference and they're
  • 00:05:29 the native element which stands behind
  • 00:05:32 it so to say so this expression here
  • 00:05:35 will give us our component in the HTML
  • 00:05:40 code so an HTML element so to say and
  • 00:05:44 then I just want to find my button here
  • 00:05:48 and attach a click event to it where I
  • 00:05:59 open alert box where I say it works yay
  • 00:06:03 okay let's see this in action
  • 00:06:05 oh let's see it in action when I
  • 00:06:08 actually implemented here so here on I'm
  • 00:06:14 batting my my jQuery component I just
  • 00:06:17 created add of course I'm also adding it
  • 00:06:21 here to the directives array jQuery
  • 00:06:26 oops jQuery Poland also make sure you
  • 00:06:29 got that import now I get this button
  • 00:06:31 and if I click it I get it works okay so
  • 00:06:35 that's how easy it is to use jQuery in
  • 00:06:37 an angular application I'm not
  • 00:06:39 to repeat all the warnings said at the
  • 00:06:40 beginning just be careful or think about
  • 00:06:44 it when you use it and if you're
  • 00:06:47 deciding you need check very well this
  • 00:06:50 is how you can interact with it in an
  • 00:06:53 English replication I hope this video
  • 00:06:55 was helpful if you liked it
  • 00:06:57 obviously please follow me on Facebook
  • 00:06:59 or Twitter subscribe to this channel or
  • 00:07:02 since today also if you want to go
  • 00:07:06 deeper into angular 2 deeper than it is
  • 00:07:08 possible for me in this channel here be
  • 00:07:10 sure to check out my You Demi course if
  • 00:07:12 you're interested in this you'll find a
  • 00:07:14 link to it in the description below see
  • 00:07:16 you in the next videos bye