Angular6- datatables1.10x-yadcf

Question

I am using angular 6 and data tables plugin. I need to implement yadcf in it. Please help me implementing it. I have used yadcf-npm to install the package. but when I use it like yadcf.init(), it throws error init of undefined. I have jquery 2.2.4.

I have used angular data table: https://l-lin.github.io/angular-datatables/#/welcome

 import { Component, OnInit, AfterViewChecked, ElementRef, ViewChild } from '@angular/core';    
    import { Claims } from 'src/app/search-tickets/grid/Claims';    
    import { Subject } from 'rxjs';   
    import { yadcf } from 'yadcf-npm';   
    import { DetailsService } from 'src/app/search-tickets/details/details.service';  
    import { DataTableDirective } from 'angular-datatables';   
    import { AfterViewInit, OnChanges, AfterContentChecked } from '@angular/core/src/metadata/lifecycle_hooks';    
    declare var jQuery: any;   
    import * as _ from "lodash"; 
    @Component({
    selector: 'app-details',
    templateUrl: './details.component.html',
    styleUrls: ['./details.component.css']
    })
    export class DetailsComponent implements OnInit, AfterViewInit, AfterViewChecked{
    selectedItem4: any;
    status: any[];
    dropdownSettings4: { singleSelection: boolean; idField: string; textField: 
    string; selectAllText: string; unSelectAllText: string; allowSearchFilter: 
    boolean; };
    pageInfo: DataTables.PageMethodeModelInfoReturn;
    pagination: any;
    click: string;
    sortExpire: any;
    sortTotal: any;
    sortId: boolean;
    dropdownSettings2: { singleSelection: boolean; idField: string; textField: 
    string; selectAllText: string; unSelectAllText: string; itemsShowLimit: 
    number; allowSearchFilter: boolean; };
    dropdownSettings1: any;
    claimsDivision: any;
    dropdownSettings: any;
    trial: any;
    selectedItem :any[];
    selectedItems: any;
    selectedItems1: any [];
    new2: any;
    @ViewChild(DataTableDirective)
    datatable: DataTableDirective;
    //dtOptions: DataTables.Settings = {};
    dtOptions: any;
    claims: Claims[] = [];
    new1: any;
    dtTrigger = new Subject();
  selected = [];
  constructor(private el:ElementRef, private detailsservice: DetailsService) { 

  }

  ngOnInit(): void {  
    this.dtOptions = {
     lengthMenu: [ 5, 10, 25, 50, 75, 100 ],

     pagingType: 'full_numbers',
     pageLength: 5,

     dom: 'lBrtip',

     ordering: false,
     preDrawCallback: function( settings ) {
       //alert("hi");
     },
      buttons: [
        // 'columnsToggle',
        // 'colvis',
        { "extend": 'copy', "text":'<span class="glyphicon glyphicon-copy"></span>',"className": 'btn btn-default btn-xs',
         exportOptions: {
          modifier: {
              columns: 'visible'
          }
         }
        },
        { "extend": 'print', "filter": "applied", "text":'<span class="glyphicon glyphicon-print"></span>',"className": 'btn btn-default btn-xs'
        }
      ]
    };



    this.detailsservice.getClaimsData()
            .subscribe(claim => {this.claims = claim;
              this.status = _.uniqBy(this.claims, 'status');


            yadcf.init(this.dtTrigger,[{ column_number: 0, filter_type: 'range_date', date_format: 'mm-dd-yyyy' }]);
            this.dtTrigger.next();


    });
  }
}

Please help me. Thanks alot.