Search results

Getting Started for Ionic with Angular

05 Oct 2022 / 3 minutes to read

This document helps you to create a simple Angular application with Ionic Framework and Syncfusion Angular UI components.


Before getting started with Syncfusion Angular Components in Ionic with Angular project, check whether the following have been installed in the developer’s machine.

  • Angular Versions supported - 4+
  • Typescript Versions supported - 2.6+
  • ionic CLI 3.9.0+

Note: If the ionic CLI is not installed, refer to the Getting Started with ionic document to install it.

Create an Application

Create a new project with the following command using the command prompt.

Copied to clipboard
npm install -g ionic

Note: Here, we are using ionic version 4.6.0 to support Angular 6.

Run the following command line to create a new Ionic template application. The new application will be placed under ej2-ionic folder after the command completes its process, and it will install the default npm dependent packages when creating the application.

Copied to clipboard
ionic start ej2-ionic blank --type=angular 

Note: Refer to this getting started document to install ionic framework.

Installing Syncfusion Button Package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular syncfusion package from npm.

Add the @syncfusion/ej2-angular-buttons package to the application.

Copied to clipboard
npm install @syncfusion/ej2-angular-buttons --save
npm i @syncfusion/ej2-angular-buttons --save

Adding Button Module

After installing the package, the component modules are available to configure your application from Syncfusion installed package. Syncfusion Angular package provides two different types of ng-Modules.

Refer to Ng Module to learn about ngModules.

Refer to the following code snippet to import the button module in app/src/home/home.module.ts from the @syncfusion/ej2-angular-buttons.

Copied to clipboard
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { HomePageRoutingModule } from './home-routing.module';

  imports: [
  declarations: [HomePage]
export class HomePageModule {}

Adding Syncfusion Component

Add the button component snippet in src/home/ as follows.

Copied to clipboard
import { Component } from '@angular/core';

  selector: 'app-home',
  template: `<button ejs-button cssClass="”e-primary”">Button</button>`,
  styleUrls: [''],
export class HomePage {

  constructor() {}


Adding CSS Reference

Add button component styles as given in the angular-cli.json file within the app > styles section.

Note: If you are using Angular 6 project, add the changes in angular.json file.

Copied to clipboard
"apps": [
     "styles": [
            "input": "./node_modules/@syncfusion/ej2-angular-buttons/styles/material.css"
            "input": "src/global.scss"

Running the Application

Finally, run the following command line to start the application. The Syncfusion Essential JS 2 button component will be rendered in the ionic framework.

Copied to clipboard
ionic serve 

Note: For your convenience, we have prepared an Angular sample with ionic framework.