$.fn.dataTable is undefined

I am using angular-datatables v 11.2 Now I am trying to replicate custom filtering example in my project link: https://l-lin.github.io/angular-datatables/#/advanced/custom-range-search

In my component.ts :

ngOnInit(): void {

    $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
      console.log("rolefilter: "+this.roleFilter+" data: "+data[6]);
      if ((this.roleFilter == "") || (this.roleFilter == data[6])) {
        return true;
      }
      return false;
    });

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength:5,
      processing:true,
      responsive: true
    }; 
  }

The error I am getting is

ERROR TypeError: Cannot read properties of undefined (reading 'ext')
    at UserProfileComponent.ngOnInit (user-profile.component.ts:73:20)
    at callHook (core.js:2573:1)
    at callHooks (core.js:2542:1)
    at executeInitAndCheckHooks (core.js:2493:1)
    at refreshView (core.js:9495:1)
    at refreshEmbeddedViews (core.js:10605:1)
    at refreshView (core.js:9504:1)
    at refreshComponent (core.js:10651:1)
    at refreshChildComponents (core.js:9277:1)
    at refreshView (core.js:9530:1)

why I am not able to get $.fn.dataTable?? how to fix this error?

l-lin / angular-datatables

$.fn.dataTable is undefined #1638