Render Accordion content using ng-content in Angular Accordion component

22 Jul 2021 / 1 minute 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.

Source

Preview

app.component.html

reusable-content.html

app.component.ts

app.module.ts

main.ts

<!-- 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>

<my-thing>
    <div class="content0">
        <div id='athletics'>
            <li><span class='e-acrdn-icons e-content-icon marathon'></span> Marathon</li>
            <li><span class='e-acrdn-icons e-content-icon javelin'></span> Javelin Throw</li>
            <li><span class='e-acrdn-icons e-content-icon discus'></span> Discus Throw</li>
            <li><span class='e-acrdn-icons e-content-icon highjump'></span> High Jump</li>
            <li><span class='e-acrdn-icons e-content-icon longjump'></span> Long Jump</li>
        </div>
    </div>
    <div class="content1">
        <div id='racing_games'>
            <li><span class='e-acrdn-icons e-content-icon dive'></span> Diving</li>
            <li><span class='e-acrdn-icons e-content-icon swimming'></span> Swimming</li>
            <li><span class='e-acrdn-icons e-content-icon marathan_swim'></span> Marathon Swimming</li>
            <li><span class='e-acrdn-icons e-content-icon sync_swim'></span> Synchronized Swimming</li>
            <li><span class='e-acrdn-icons e-content-icon waterpolo'></span> Water Polo</li>
        </div>
    </div>
    <div class="content2">
        <div id='water_games'>
            <li><span class='e-acrdn-icons e-content-icon cycle_BMX'></span> Cycling BMX</li>
            <li> <span class='e-acrdn-icons e-content-icon cycle_Mountain'></span> Cycling Mountain Bike</li>
            <li> <span class='e-acrdn-icons e-content-icon cycle'></span> Cycle Racing</li>
            <li> <span class='e-acrdn-icons e-content-icon sailing'></span> Sailing</li>
            <li> <span class='e-acrdn-icons e-content-icon rowing'></span> Rowing</li>
        </div>
    </div>
    <div class="content3">
        <div id='indoor_games'>
            <li><span class='e-acrdn-icons e-content-icon tennis'></span> Table Tennis</li>
            <li> <span class='e-acrdn-icons e-content-icon badminton'></span> Badminton</li>
            <li> <span class='e-acrdn-icons e-content-icon volleyball'></span> Volleyball</li>
            <li> <span class='e-acrdn-icons e-content-icon boxing'></span> Boxing</li>
            <li> <span class='e-acrdn-icons e-content-icon swimming_In'></span> Swimming</li>
        </div>
    </div>
  </my-thing>

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

@Component({
  selector: 'my-thing',
  templateUrl: 'app/app.component.html'
})
export class AccordionComponent {}

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

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 { }

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

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);