- 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
