如何在angular 4中使用Flip jQuery插件

Question

I had a component that takes use of jQuery and Flip plugin for this one, the main problem is when i try to use it in ngAfterViewInit it simply does not work, but also didn't get any error from log, is there maybe a step I'm forgetting to do so i can take use of flip plugin ?

Here is my code at the moment, hope you can help me guys and thanks for your time

import { Component, OnInit ,AfterViewInit} from '@angular/core';
import {ApiBackEndService} from '../api-back-end.service';
import { DatePipe } from '@angular/common';
import * as moment from 'moment';
declare var $ : any;

declare var flip : any;
@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html',
  styleUrls: ['./booking.component.css']
})
export class BookingComponent implements OnInit , AfterViewInit{
...
  constructor(private api:ApiBackEndService) { }
  ngAfterViewInit(){

      $(".flip").flip({
        axis: 'y',
        trigger: 'hover'
      });
  }
  ngOnInit() {
    this.api.loadRooms().subscribe(data=>{
      this.rooms=  data.rooms;          
    });    
  }

...

}

jQuery Version 3.*

Answer 1

It seem since i'm using observables to fill the data of the ones that are into a .flip class , something happened that it takes a few seconds to render the data, and the actually works, by now what i do it's setTimeOut 1 second and it works perfect, i'm looking for a better solution, any updates, i'll post it here

this.api.loadRooms().subscribe(data=>{
      this.rooms=  data.rooms;
      this.enableAnimations();
    });

enableAnimations(){
    setTimeout(()=>{ $(".flip").flip({
      axis: 'y',
      trigger: 'hover'
    }); }, 1000);

  }

with this implementation, it works fine, i know it may be a better way to avoid timeout