How can I any jquery plugin in root page on Angular 2?

Question

I want to do an image slider in a route page of Angular 2. I plugged in the flexslider and bootstrap carousel but I did not do it anyway. How can I do that?

My Route Page Code is

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { ProviderMain } from '../provider/provider';
import { ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';





@Component({
    selector: 'detail',
    templateUrl: '/app/detail/detail.html',
    providers: [ProviderMain],


})

export class Detail
{
    public link: any;
    public mainData: any;
    public bookingInformation: Array<any>;
    public detail: Array<any>;
    public information: any;
    public itemImages: Array<any>;

    private NextPhotoInterval: number = 5000;
    //Looping or not
    private noLoopSlides: boolean = true;
    //Photos
    constructor(public http: Http, public routePrm: ActivatedRoute, public provide: ProviderMain)
    {
        console.log("Detail Html Başladı");
        this.routePrm.params.subscribe(params => {
            this.link = params["link"];
            this.getDetail(this.link);
        });

    }
    ngAfterViewInit() {

    }
    getDetail(link: any) {
        this.provide.getServiceDetailInformation(link).then(data => {
            this.bookingInformation = data.bookingInformation;
            this.detail = data.detail;
            this.information = data.information[0];
            this.itemImages = data.itemImages;
        });
    }



}

and my html code is

  <div id="slider" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="assets/images/holiday-slide3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-slide4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/slide15.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-slide3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-slide4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/slide15.jpg" alt="cruise">
                        </li>
                    </ul>
                </div>
                <div id="carousel" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="assets/images/holiday-thumb3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb5.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb5.jpg" alt="cruise">
                        </li>
                    </ul>
                </div>

If the plugin I normally use is

 $(document).ready(function () {
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 150,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
        });
    });

Bu That is not work.How can I do that ? Thank for all.

[Angular and mixing jQuery UI - Why not?](https://stackoverflow.com/questions/24830498/angular-and-mixing-jquery-ui-why-not) — Liam, Jul 21 '17 at 15:10
also you should read [“Thinking in AngularJS” if I have a jQuery background?](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — Liam, Jul 21 '17 at 15:13
What I'm trying to say is, don't mix jquery and angular, this way madness lies — Liam, Jul 21 '17 at 15:13

score 1 · Accepted Answer · answered Jul 21 '17 at 15:36

Heed @Liam's warning and avoid this if possible. Use with caution...

In your template, add references to the flexslider elements:

<div #slider id="slider" class="flexslider">
    <!-- ... -->
</div>
<div #carousel id="carousel" class="flexslider">
    <!-- ... -->
</div>

In your component, you would want to import ViewChild and NgZone to run jQuery outside of Angular. Create references to elements in your template view. You would then run your plugins in the ngAfterViewInit method.

import { Component, NgZone, ViewChild } from '@angular/core';
import $ from "jquery";
//...

@Component({
    selector: 'detail',
    templateUrl: '/app/detail/detail.html',
    providers: [ProviderMain]
})
export class Detail {
    @ViewChild('slider') slider;
    @ViewChild('carousel') carousel;

    $carousel: JQuery | any;
    $slider: JQuery | any;

    constructor(
        private zone: NgZone
    ) {}

    //...

    ngAfterViewInit() {
        this.zone.runOutsideAngular(() => {
            this.$carousel = $(this.carousel.nativeElement).flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 150,
                itemMargin: 5,
                asNavFor: this.slider.nativeElement
            });

            this.$slider = $(this.slider.nativeElement).flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: this.carousel.nativeElement
            });
        }
    }

    //...
}

Check out this article on Hackernoon for reference

Corey Im tried but I take Sytem.js unexpected token < errors — huseyinokumus, Jul 22 '17 at 09:05

How can I any jquery plugin in root page on Angular 2?

1 Answers1