Angular 10 pagination with inner html content

Question

I am working on angular project where I need to implement pagination or carousal type functionality on inner html content.

https://portal.growthemr.com/website?bid=1274&lpid=26053 I have a above page where we are injecting services dynamically on api call and the template for service is also dynamic. My requirement is to implement pagination on it but with inner html conent as I need to put those services in the template. But somehow below approach is not working.

I have tried ngx pagination but I cannot use it as I want pagination for content which will be injected as html

The approach I tried but it is giving error $(..)pagination is not a fucntion index.html

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://pagination.js.org/dist/2.1.4/pagination.css"/>

Component.ts

$('#list').pagination({ // you call the plugin
  dataSource: json.Product, // pass all the data
  pageSize: 2, // put how many items per page you want
  callback: function(data, pagination) {
      // data will be chunk of your data (json.Product) per page
      // that you need to display
      var wrapper = $('#list .wrapper').empty();
      $.each(data, function (i, f) {
         $('#list .wrapper').append('<ul><li>Key1: ' + f.Key1 + '</li></ul>');
      });
    }
   });