Accordion component not displaying text

[[e-mail]]

I followed the Angular Accordion example, it shows the accordion component but without text. Please see the attached picture. Can you please let me know how can I fix this problem to show/display the text in accordion component with header and body.

Attached Picture:

Screenshot

Component HTML:

<c-accordion [alwaysOpen]="false" class="accordion-custom">
    <c-accordion-item *ngFor="let item of items; let i = index;" [visible]="false">
       <ng-template cTemplateId="accordionHeader">
          Custom Accordion item #{{i}}
       </ng-template>
       <ng-template cTemplateId="accordionBody">
       <small><i>{{i}}.</i></small>
          <span [innerHTML]="getAccordionBodyText(i.toString())"></span>
       </ng-template>
    </c-accordion-item>
</c-accordion> 

Component:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-accordions',
  templateUrl: './accordions.component.html',
  styleUrls: ['./accordions.component.scss']
})
export class AccordionsComponent {

  items = [1, 2, 3, 4];

  constructor(
    private sanitizer: DomSanitizer
  ) { }

  getAccordionBodyText(value: string) {
    const textSample = `
      <strong>This is the <mark>#${value}</mark> item accordion body.</strong> It is hidden by
      default, until the collapse plugin adds the appropriate classes that we use to
      style each element. These classes control the overall appearance, as well as
      the showing and hiding via CSS transitions. You can modify any of this with
      custom CSS or overriding our default variables. It&#39;s also worth noting
      that just about any HTML can go within the <code>.accordion-body</code>,
      though the transition does limit overflow.
    `;
    return this.sanitizer.bypassSecurityTrustHtml(textSample);
  }
}

[xidedix]

For cTemplateId directive you have to import {SharedModule} from '@coreui/angular'