Call jQuery function from controller Angular4

Question

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.

You can't usewindow.ready it's not available in angular.

Roman C
– Roman C

2017-07-26 11:49:29 +00:00
Commented Jul 26, 2017 at 11:49 — Roman C
– Roman C, Commented Jul 26, 2017 at 11:49
angular.io/api/core/AfterViewInit

onetwo12
– onetwo12

2017-07-26 11:53:25 +00:00
Commented Jul 26, 2017 at 11:53 — onetwo12
– onetwo12, Commented Jul 26, 2017 at 11:53

Elvin Garibzade · Accepted Answer · 2017-07-26 12:14:33Z

3

///<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! ^_^");
  }
}

answered Jul 26, 2017 at 12:14

Elvin Garibzade

4954 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Drako Over a year ago

AfterViewInit function is ok, but I need to call to a function by its name, for example: I declared function hello() { alert('hello!'); } but in the controller I need to call it by its name, hello();

Collectives™ on Stack Overflow

Call jQuery function from controller Angular4

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related