CODEWITHSUNDEEP
jqueryangular
Drako
Drako

Reputation: 799

Call jQuery function from controller Angular4

I'm trying call a jquery function mine from an Angular 4 controller when an async function be complete, but I can't find how.

My controller:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MyService } from '../my.service';

declare var $: any;

@Component({
  selector: 'slider',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {

  banners: Promise<String[]>;

  ngOnInit(): void {
    this.banners.then(function(result) { 
            // HERE MUST BE MY CODE FUNCTION
    });
  }

  constructor(private myService: MyService) {
        this.banners = this.myService.getBanners();

    }
}

And my template:

<div id="slider1_container" style="position: relative; margin: 0 auto; width:600px; height:300px; left:0px; top:0px;">

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
            overflow: hidden;">
            <div *ngFor="let b of banners | async">
                <img u="image" src="{{ b }}" />
            </div>
        </div>

        <!-- Trigger -->
        <div class="slideshow-block">

            <div style="margin: 0 4px; display: none; ">
                <input id="stTransitionName" readonly type="text" style="width:200px;height:22px;" />
            </div>
            <div style="display: none; margin: 0 4px;">
                <input id="stTransition" readonly type="text" style="width:100%;height:22px;" />
            </div>

            </div>
    </div>

When all my banners be loaded I need to call a jquery function to make the move effect. Before, with only HTML and jquery I called the function on the window.ready function but now this is useless because it's an async function.

Thanks.

Upvotes: 1

Views: 1813

Answers (1)

Elvin Garibzade
Elvin Garibzade

Reputation: 495

///<reference path="../typings/jquery/jquery.d.ts" />

import {Component, AfterViewInit} from 'angular2/core';

@Component({
  selector: 'your-app',
  templateUrl: './app.component.html'
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    // Your jQuery code goes here
    $('#yourElement').text("Hello! ^_^");
  }
}

Upvotes: 3

Related Questions