How to get started easily with Syncfusion Angular 6 Accordion?

A quick start project that helps you to create an Angular 6 Accordion with minimal code configuration.

Project pre-requisites

Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.

• Angular 6+
• TypeScript 2.6+

Angular 6 Accordion – Introduction

The Angular 6 Accordion used in this project is created from the Syncfusion `ej2-angular-accordion` package. You can simply define it as <ejs-accordion> within the template.

Dependencies

Before starting with this project, the Angular 6 Accordion requires to add the Syncfusion `ej2-angular-navigations` package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

We will see the Angular project creation steps using the Angular CLI tool.

1. Install the Angular CLI application in your machine.

   npm install -g @angular/cli@6.2.7
   

2. Now create a new Angular project by using the command `ng new` and navigate to that folder.

   ng new <project name>
   cd <project name>
   

3. Install the ej2-angular-navigations package through the npm install command.

   npm install @syncfusion/ej2-angular-navigations --save
   

Adding Angular 6 Accordion

You can add the Angular 6 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities.

1. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package.
2. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts.

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
@NgModule({
    imports: [
        BrowserModule, AccordionModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3. Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file.

[app.component.html]

<ejs-accordion>
  <e-accordionitems>
    <e-accordionitem expanded='true'>
      <ng-template #header>
        <div>ASP.NET</div>
      </ng-template>
      <ng-template #content>
        <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications
          and XML Web services.
        </div>
      </ng-template>
    </e-accordionitem>
    <e-accordionitem>
      <ng-template #header>
        <div>ASP.NET MVC</div>
      </ng-template>
      <ng-template #content>
        <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components:
          the model, the view, and the controller.
        </div>
      </ng-template>
    </e-accordionitem>
    <e-accordionitem>
      <ng-template #header>
        <div>JavaScript</div>
      </ng-template>
      <ng-template #content>
        <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of
          web browsers so that client-side scripts could interact with the user, control the browser, communicate
          asynchronously, and
          alter the document content that was displayed.
        </div>
      </ng-template>
    </e-accordionitem>
  </e-accordionitems>
</ejs-accordion>

4. Refer the CDN link of CSS reference within the index.html file.

[index.html]

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

5. Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser.

There are more options to explore with Angular 6 Accordion.