How to get started easily with Syncfusion Angular 11 Accordion?

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

Project pre-requisites

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

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Angular 11 Accordion – Introduction

The Angular 11 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 this project, the Angular 11 Accordion requires to adding 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@11.2.3

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

ng new angular11-app
cd angular11-app

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

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

Adding Angular 11 Accordion

You can add the Angular 11 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 the 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 11 Accordion.

Conclusion

We hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Accordion.

You can refer to our Angular Accordion page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Accordion example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!