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 in 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 with this project, the Angular 11 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.
- Install the Angular CLI application in your machine.
npm install -g @angular/cli@11.2.3
If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number.
npm install -g @angular/cli@<CLI VERSION>
- Now create a new Angular project by using the command `ng new` and navigate to that folder.
ng new angular11-app cd angular11-app
- Install the ej2-angular-navigations package through the 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.
- Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package.
- 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 { }
- 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>
- 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" />
- 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.