how to inject third party component (primeng, ...) from ts angular to template html

Question

i want to inject component <p-inputSwitch [(ngModel)]="checked"></p-inputSwitch> from angular component to html then access to bind data to ngModel. how do?

not working: show follwing in inspect with shematic and no parsing to pure html and not showing in browser:

switcher = "<p-inputSwitch [(ngModel)]="checked"></p-inputSwitch>"


innerHtmlBindData(rowData: any, col: any, rowIndex: number, trashIcon: any) {
    return col.field === 'num' ? rowIndex + 1
          : col.field === 'remove'
          ? new SafeHTMLPipe(this.sanetizer).transform(trashIcon) // working
          : col.field === 'edit'
          ? new SafeHTMLPipe(this.sanetizer).transform(this.editIcon) // working
          : col.field === 'super' && rowData[col.field] === true
          ? 'بله'
          : col.field === 'super' && rowData[col.field] === false
          ? 'خیر'
          : col.field === 'block' 
          ? new SafeHTMLPipe(this.sanetizer).transform(this.switcher) // not working
          : rowData[col.field]
  }

<ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
   <tr 
      [ngClass]="{'cursor-pointer hover:bg-gray-50': tabIndex === 0 && currentRoute === '/dashboard/app' && rowData[columns?.[3].field] !== 'edit'}">
      <td 
         *ngFor="let col of columns; let i=index" 
         class="td text-base text-center block"
         (click)="onTDTableClick($event, rowData, rowIndex, col)"
         [innerHTML]="innerHtmlBindData(rowData, col, rowIndex, trashIcon)">
       </td>
   </tr>
</ng-template>

priview image :