Adding pagination to HTML table using NgxPaginationModule results in error

Question

I am trying to add pagination to my HTML table in angular 11 using NgxPaginationModule. The backend service is in asp.net and the data is getting properly displayed without pagination.
Here is my corresponding html and transcript file.

<table class="table table-striped" id="myTable">

<thead>
    <tr>
        <th>Id</th>
        <th>Created By</th>
        <th>Modified By</th>
        <th>Options</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor = "let dataItem of CardList | paginate: config ">
        <td>{{dataItem.id}}</td>
        <td>{{dataItem.createdBy}}</td>
        <td>{{dataItem.modifiedBy}}</td>
        <td>
          <button type="button" class="btn btn-light mr-1"
          data-bs-toggle="modal" data-bs-target="#exampleModal"
(click)="editClick(dataItem)"
data-backdrop="static" data-keyboard = "false"
          >
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
            <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
          </svg>
          </button>
            <button type="button" class="btn btn-light mr-1"
                (click)="deleteClick(dataItem)"
                >
                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z"/>
                  </svg>
                  </button>
        </td>
    
    </tr>
</tbody>

import { Component, OnInit } from '@angular/core';
import { SharedService } from 'src/app/shared.service';

@Component({
  selector: 'app-del-card',
  templateUrl: './del-card.component.html',
  styleUrls: ['./del-card.component.css']
})
export class DelCardComponent implements OnInit {
  config: any;
  

  constructor(private service:SharedService) { 
    this.config = {
      itemsPerPage: 5,
      currentPage: 1,
      totalItems: 4
    };
    console.log(this.config)
  }
  pageChanged(event){
    this.config.currentPage = event;
  }

  CardList:any=[];
  crd:any;
  ModalTitle:string;
  ActivateAddCardComponent:boolean=false;

  ngOnInit(): void {
    this.refreshCardList();
    
  }

  addClick(){
    this.crd={
      id:0,
      createdBy:"",
      modifiedBy:""
    
    }
    this.ModalTitle="Add Card";
    this.ActivateAddCardComponent=true;

  }
  closeClick(){
    this.ActivateAddCardComponent=false;
    this.refreshCardList();
  }
  editClick(item){
    console.log(item);
    this.crd=item;
    this.ModalTitle="Edit Employee";
    this.ActivateAddCardComponent=true;
  }


  refreshCardList(){
    this.service.getCardList().subscribe(data =>{
      this.CardList=data;
      //this.totalLength=data.length;
      
    });
  }

  deleteClick(item){
    if(confirm('Are you sure??')){
      this.service.deleteCard(item.id).subscribe(data=>{
        alert(data.toString());
        this.refreshCardList();
      })
    }
  }

}

I am getting below error "Error: NG0203: inject() must be called from an injection context" after I added the pagination to my html table:

Please help in rectifying the problem as I am new to angular.