Getting Started with Angular CLI

Refer to the following steps to use for Syncfusion Angular UI Components (Essential JS 2).

Prerequisites

To get started with Syncfusion Angular UI Components, ensure the compatible versions of Angular and Typescript.

• Angular : 4+
• Typescript : 2.6+

Getting started with Angular CLI

Setting up an angular project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new application

ng new syncfusion-angular-app

By default, it installs the CSS style base application. To setup with SCSS, pass —style=SCSS argument on create project.

Example code snippet.

ng new syncfusion-angular-app --style=scss

Navigate to the created project folder.

cd syncfusion-angular-app

Installing Syncfusion button package

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

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

npm install @syncfusion/ej2-angular-buttons --save
(or)
npm i @syncfusion/ej2-angular-buttons --save

Installing Syncfusion button package with Custom Tagname

You can also change the tag name of Syncfusion Angular UI Controls.

Run the below command to add @syncfusion/ej2-angular-buttons package to the application with the desired tag name custom.

SET tagName=custom && npm install @syncfusion/ej2-angular-buttons

After executing the above command, the Syncfusion Angular UI component selector will be changed. For example, the tag name of <ejs-buttons> will be changed into <custom-buttons>.

Adding button module

After installing the package, the component modules are available to configure into your application from the installed syncfusion package. Syncfusion Angular package provides two different types of ngModules.

Refer to Ng-Module to learn about ngModules.

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

// Imported syncfusion button module from buttons package
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    // Registering EJ2 Button Module
    ButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion component

Add the button component snippet in app.component.ts as follows.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
<h1>
    Hello Angular, Syncfusion Angular UI Button!
 </h1>

 <button ejs-button cssClass=”e-primary”>Button</button>
 `
 })
export class AppComponent {
}

Adding CSS reference

Add button component styles in the src/style.css file as below.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

Adding SCSS reference

To avoid SCSS compilation issues and to map the SCSS file path, add the stylePreprocessorOptions to the .angular-cli.json file.

Add the stylePreprocessorOptions option under apps in the .angular-cli.json file.

The following paths can be used globally in Angular app.

"stylePreprocessorOptions": {
         "includePaths": [
         "node_modules/@syncfusion"
        ]
  },

Add button component styles in the src/style.scss file as below.

@import "../node_modules/@syncfusion/ej2-base/styles/material.scss";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.scss";

Running the application

Run the ng serve command in the console, it will serve your application and you can open the browser window. The Output will appear as follows.

import { enableRipple } from '@syncfusion/ej2-base';
import { Component } from '@angular/core';

// enable ripple effects
enableRipple(true);

@Component({
  selector: 'app-root',
  template: `
  <h1>
    Syncfusion Angular UI Button!
  </h1>

  <button ejs-button>Button</button>
  `
})
export class AppComponent {

}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);