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.
<!-- 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);