Angular Series 1-How to use jquery and its plugins in ANGULAR2

JQuery makes it easier to manipulate the DOM. Due to its ease of use and scalability, Jquer also quickly swept the world, a variety of plug-ins are also dizzying.

I'm sure a lot of people don't go straight from jquery to the front, because it's so easy to use, and most of what we used to do is based on jquery and its plugins. And now Angular2 's component ecology is not perfect, we may want to use jquery when writing angular. This article provides a brief introduction to the use of jquery in Angular2

If you do not know how to set up the ANGULAR2 development environment, please refer to my previous writing this article: ANGULAR2 Introductory Series Tutorial 1-Using ANGULAR-CLI to build a ANGULAR2 development environment

Environment set up only after the first run up, and then we carry out the following steps

First quote jquery in index.html, just like we did before.

And then we write our app.component.ts.

1Import {Component,oninit} from ' @angular/core ';2Declarevar$:any;3 @Component ({4Selector: ' App-root ',5Templateurl: './app.component.html ',6Styleurls: ['./app.component.css ']7 })8 Export class AppComponent implements oninit{9 Ngoninit ()Ten   { One$ ("#title"). HTML ("<p>this is a string from jQuery HTML setting</p>"); A   } -}

First we need to use the declare life of our jquery to make it a usable variable, then we need to import the OnInit module and implement, we write the jquery code here, the question shows us to the ID title of the label replacement content, HTML page is like this

<div id= "title" class= "title" ></div>

And then the next thing that works is this.

This means we can use jquery normally in Angular2.

Next make a simple jquery plugin use example, first find a jquery plugin we want to use, I use this, 3D visual image

First, refer to in index.html

Then write the following initialization plug-in code in the Ngoninit of our earlier app.component.ts

Ngoninit ()  {    $ (". Card"). Facecursor ({});     $ ("#title"). HTML ("<p>this is a string from jQuery html setting</p>");  }

Then we write the HTML

1 <div id= "title" class= "title" >2 </div>3 <div class= "Container" >4    <div class= "card" >5     6   </div>7 </div>

As1

1 . Card2 {3 background: #fff;4Box-shadow:0.5em 0 1. 25em #ccc;5border-radius:. 3em;6 Overflow:hidden;7max-width:20em;8 height:450px;9margin:0Auto;Ten Display:block; One } A . title{ -text-Align:center; - } the . Container - { -width:100%; -}

After these jobs have been done, we can get the following effect under the run

Note: Where jquery is required, use declare to declare the following, such as in other component files.

I think we should all know how to use it, if you need code please leave a message

Angular Series 1-How to use jquery and its plugins in ANGULAR2