Render accordion content using angular content in Angular Accordion component

28 Sep 20234 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 { Component, ViewEncapsulation, Inject } from '@angular/core';

@Component({
  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 {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

import { AccordionComponent, MyApp } from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        AccordionModule
    ],
    declarations: [AccordionComponent, MyApp],
    bootstrap: [MyApp]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);