Render accordion content using angular content in Accordion component

27 Apr 20243 minutes to read

To render the Accordion contents using ng-content, we need to use ng-template inside the each e-accordionitem tag with #content attribute, which is mandatory to render content. Now include ng-content inside the ng-template tag with select attribute of id or class name for mapping required content.

  <e-accordionitem expanded='true' header='Athletics'>
    <ng-template #content>
      <ng-content select='div.content0'></ng-content>
    </ng-template>
  </e-accordionitem>

 Here div.content0 mapped to ng-content is reusable content. It can be used in multiple scenarios within the application.

app.component.html

<!-- Render the Accoridon Component by using ng-content -->

<ejs-accordion expandMode='Single'>
    <e-accordionitems>
        <e-accordionitem expanded='true' header='Athletics'>
            <ng-template #content>
                <ng-content select="div.content0"></ng-content>
            </ng-template>
        </e-accordionitem>
        <e-accordionitem header='Water Games'>
            <ng-template #content>
                <ng-content select="div.content1"></ng-content>
            </ng-template>
        </e-accordionitem>
        <e-accordionitem header='Racing'>
            <ng-template #content>
                <ng-content select="div.content2"></ng-content>
            </ng-template>
        </e-accordionitem>
        <e-accordionitem header='Indoor Games'>
            <ng-template #content>
                <ng-content select="div.content3"></ng-content>
            </ng-template>
        </e-accordionitem>
    </e-accordionitems>
</ejs-accordion>

app.component.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
import { AccordionModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewEncapsulation, Inject } from '@angular/core';

@Component({
imports: [
        
        AccordionModule
    ],


standalone: true,
  selector: 'my-thing',
  templateUrl: './app.component.html'
})
export class AccordionComponent {}

@Component({
  selector: 'control-content',
  templateUrl: './reusable-content.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class MyApp {}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));