How to get started easily with Syncfusion Angular 7 button?

A quick start project that helps you to create an Angular 7 Button with a minimal code configurations.

Angular 7 Button

The following section explains the steps required to create a simple angular 7 button component.

Prerequisites

Before start, we need following items to create Angular Button in Angular 7 application.

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor.
• Typescript 2.6+

Dependencies

The angular 7 button created from the Syncfusion ej2-angular-buttons package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

• Install Angular cli 7 using following command.

  npm install -g @angular/cli@7.0.5
  

• Create a new Angular 7 project using Angular cli and navigate to that folder.

  ng new <project name>
  cd <project name>
  

Adding Angular Button

• After running the Angular 7 application successfully, configure the Angular Button in this application. Install Angular Button and EJ2 package using following command. The --save command will instruct the NPM to include a button package inside the dependencies section of the package.json.

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

• Import Button from installed package in app/app.module.ts.
• Import and inject the other required modules within the providers section of app.module.ts.

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

• Add the given below angular button’s styles in styles.css.

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

• Add the angular buttons component in app.component.ts.

  import { Component } from '@angular/core';
   
  @Component({
    selector: 'app-root',
    template: `<button ejs-button>Button</button>`
  })
  export class AppComponent {}
  

• Now serve the application using following command.

  ng serve
  

Once the files are compiled successfully, it will serve the site at localhost:4200

Screenshot:

Change Button Type

To change the default button to flat button, set the cssClass to e-flat and text content of the button is set using content property.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<button ejs-button cssClass='e-flat' content='Button'></button>`
})
export class AppComponent {}