A quick start project that helps you to create an Angular 9 DatePicker component with a minimal code configuration. Angular 9 DatePicker The following section explains the steps required to create a simple Angular 9 DatePicker component. Pre-requisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js (latest version) Angular 9+ Angular CLI TypeScript 3.7+ Visual studio code for editor Introduction The Angular 9 DatePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-datepicker> within the template. Dependencies Before starting with this project, the Angular 9 DatePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 9 using following command. npm install -g @angular/cli@9.0.2 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-calendars package through the npm install command. npm install @syncfusion/ej2-angular-calendars --save Adding Angular 9 DatePicker You can add the Angular 9 DatePicker component by using ejs-datepicker directive and the attributes within the tag allows you to define other functionalities. Import the DatePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, DatePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular DatePicker code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the DatePicker component rendered with the min and max property. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public minDate: Date = new Date ("05/07/2017"); public maxDate: Date = new Date ("05/27/2017"); public dateValue: Date = new Date ("05/16/2017"); constructor () {} } [app.component.html] <ejs-datepicker id='datepicker' placeholder='Select a date' [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-datepicker> Refer to the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" /> Run the application with the command ng serve and have a DatePicker with min and max date will be displayed on the browser as shown below. Date Format Date format is a way of representing the date value in different string format in the textbox. By default, the DatePicker’s format is based on the culture. You can also set the own custom format by using the format property. Note:Once the date format property has been defined it will be common for all cultures Here, DatePicker component rendered with the custom format yyyy-MM-dd. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public dateValue: Date = new Date ("05/16/2017"); constructor () {} } [app.component.html] <ejs-datepicker id='datepicker' placeholder='Select a date' [value]= 'dateValue' format ='yyyy-MM-dd'></ejs-datepicker> Run the application with the command ng serve and have a DatePicker with custom format will be displayed on the browser as shown below. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!ConclusionI hope you enjoyed learning about how to get started easily with Syncfusion Angular 9 DatePicker.You can refer to our Angular DatePicker feature tour 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 DatePicker 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, Direct-Trac, or feedback portal. We are always happy to assist you!
A quick start project that helps you to create an Angular 9 CheckBox with a minimal code configurations. Angular 9 CheckBox The following section explains you how to create a simple angular 9 CheckBox component. Prerequisites Before start, we need following items to create Angular CheckBox in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The angular 9 CheckBox is 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 9 using following command.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 8 or Angular 7 or Angular 6, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular CheckBox After running the Angular 9 application successfully, configure the Angular CheckBox in this application. Install Angular CheckBox and EJ2 package using following command. The --save command will instruct the NPM to include a CheckBox package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-buttons --save Import CheckBox from installed package. 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 { CheckBoxModule } from '@syncfusion/ej2-angular-buttons'; import { AppComponent } from './app.component'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, CheckBoxModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Add the given below angular checkbox’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; Add the angular CheckBox component in app.component.ts.import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-checkbox label='Default'></ejs-checkbox>` }) 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 the CheckBox state The CheckBox checked property is used to handle the checked and unchecked state. In checked state a tick mark will be added to the visualization of CheckBox. Indeterminate CheckBox indeterminate state can be set through indeterminate property. CheckBox indeterminate state masks the real value of CheckBox visually. CheckBox cannot be changed to indeterminate state through the user interface, this state can be achieved only through the property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<ul> <li><ejs-checkbox label="Checked State" [checked]="true"></ejs-checkbox></li> <li><ejs-checkbox label="Unchecked State"></ejs-checkbox></li> <li><ejs-checkbox label="Indeterminate State" [indeterminate]="true"></ejs-checkbox></li> </ul>` }) export class AppComponent { } Screenshot: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Material file Uploader component with a minimal code configuration. Angular 9 Material File Uploader The following section explains the steps required to create a simple Angular 9 Material file Uploader component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 9+ Angular CLI TypeScript 3.7+ Visual Studio code for editor Introduction The Angular 9 Material file Uploader used in this project is created from the Syncfusion ej2-angular-inputs package. You can simply define it as <ejs-uploader> within the template. Dependencies Before starting with this project, the Angular 9 Material file Uploader requires to add the Syncfusion ej2-angular-inputs package from npmjs, which are distributed in npm as @syncfusion scoped packages. File Uploader requires the following dependent packages for rendering file Uploader component. |-- @syncfusion/ej2-angular-inputs |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-angular-popups |-- @syncfusion/ej2-angular-buttons |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-base |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the file Uploader component. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 9 using following command. npm install @angular/cli@9.0.2 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-inputs package through the npm install command. npm install @syncfusion/ej2-angular-inputs --save Adding Angular 9 Material File Uploader You can add the Angular 9 file Uploader component by using the ejs-uploader directive and the attributes within the tag allows you to define other functionalities. Import the Uploader module into the Angular application (app.module.ts) from the ej2-angular-inputs package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { UploaderModule } from '@syncfusion/ej2-angular-inputs'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, UploaderModule], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular file Uploader code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the file Uploader component is rendered with the asyncSettings property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public path: Object = { saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' }; } [app.component.html] <ejs-uploader [asyncSettings]='path'></ejs-uploader> Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; Run the application with the command ng serve and an file Uploader with material theme will be displayed on the browser as follows. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
How to get started easily with Syncfusion Angular 9 Stock Chart? A quick start project that helps you to create an Angular 9 Stock Chart with minimal code configuration. Stock Chart features covered in this Project This is an Angular 9 project created using Angular CLI 9.0.2 The Stockchart features listed in this project are as follows. Angular 9 stock chart visualizing the data in candle series. Building other series type. Setting tooltip and crosshair for chart. Period and Range selector 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. Angular 9+ TypeScript 3.7+ Angular 9 Stock Chart – Introduction The Angular 9 Stock Chart used in this project is created from the Syncfusion `ej2-angular-charts` package. You can simply define Stock Chart as <ejs-stockchart> within the template. Dependencies Before starting with this project, the Angular 9 Stock Charts requires adding the Syncfusion `ej2-angular-charts` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating an Angular application To create an Angular application, install the Angular CLI globally using the following command. npm install -g @angular/cli@9.0.2 Then create a new Angular application using the following command. ng new my-app This command downloads all the files needed and initializes the npm installation. Installing the stockchart component After the Angular application has been created, use the following command to install the chart package. cd my-app npm install @syncfusion/ej2-angular-charts –save The –save flag saves the charts package as a dependency in the package.json file. All configuration related to environment setup is now complete. Before configuring the stockchart, a component is needed to render the stockchart. To create an Angular component, use the following Angular CLI command. ng generate component stockchart Next, import the chart module and stockchart module in the app.module.ts file. import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import { ChartModule, StockChartAllModule } from '@syncfusion/ej2-angular-charts'; import {AppComponent} from './app.component'; @NgModule ({ declarations: [AppComponent], imports: [BrowserModule, ChartModule, StockChartAllModule], bootstrap: [AppComponent] }) export class AppModule { } Creating the stockchart component All configuration related to the stockchart is now complete. Now we need to define our first stockchart in the stockchart.component.html file. <ejs-stockchart></ejs-stockchart> Then, add the stockchart component in the app.component.html file. <app-stockchart></app-stockchart> Go to the application directory and launch the server by using following command. ng serve Injecting modules Before providing data to the stockchart, let’s learn more about the stockchart types that Syncfusion supports. The Syncfusion stockchart component can plot more than 10 chart types. Each type is modularized and available as a separate service, so you can use only the modules you need, to keep your app lightweight. For example, if you want to visualize data with a candle chart, define the candleSeriesService in the providers of the app.module.ts file. This service provides access to the candle chart functionality. import {StockChartModule} from '@syncfusion/ej2-angular-charts'; import {DateTimeService, CandleSeriesService} from '@syncfusion/ej2-angular-charts'; @NgModule({ imports: [BrowserModule, StockChartModule], providers: [DateTimeService, CandleSeriesService] }) After the candleSeriesService is injected in the providers, set the series type as Candle and populate the data in the stockchart by using the dataSource property, which accepts a JavaScript object. import {Component, OnInit } from '@angular/core'; @Component ({ selector: 'app-stockchart', template: `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis"> <e-stockchart-series-collection> <e-stockchart-series [dataSource]="chartData" type="Candle" xName="x" yName="high" name="Gold" High=” high” Low=” low” Open=” open” Close=” close”> </e-stockchart-series> </e-stockchart-series-collection> </ejs-stockchart>` }) export class AppComponent implements OnInit { public chartData: Object []; public primaryXAxis: Object; ngOnInit(): void { // Data for chart series this.chartData = [{ "x": new Date('2012-04-02T00:00:00.000Z'), "open": 320.705719, "high": 324.074066, "low": 317.737732, "close": 323.783783, "volume": 45638000 }, { "x": new Date('2012-04-03T00:00:00.000Z'), "open": 323.028015, "high": 324.299286, "low": 319.639648, "close": 321.631622, "volume": 40857000 }, { "x": new Date('2012-04-04T00:00:00.000Z'), "open": 319.544556, "high": 319.819824, "low": 315.865875, "close": 317.892883, "volume": 32519000 }, { "x": new Date('2012-04-05T00:00:00.000Z'), "open": 316.436432, "high": 318.533539, "low": 314.599609, "close": 316.476471, "volume": 46327000 }] this.primaryXAxis = { valueType: 'DateTime' }; } } The populated stockchart will look something like this: Populated Stock Chart Building other stockchart types Implementing other stockchart types is very similar to implementing the candle series chart. If you want an Area or line chart, just inject its corresponding services in the providers and change the series type. `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" > <e-stockchart-series-collection> <e-stockchart-series [dataSource]="chartData" type="Area" xName="x" yName="high" name="Gold"></e-stockchart-series> </e-stockchart-series-collection> </ejs-stockchart>` Tooltip You can also provide more information about stockchart data points when pointing to them by using tooltip. To make use of the tooltip functionality, just inject the TooltipService in the provider and enable the tooltip by setting the enable property to true. `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [tooltip]="tooltip"> <e-stockchart-series [dataSource]='chartData' type='Candle' xName='x' yName='high' name='India' width=2 ></e-stockchart-series> </ejs-stockchart>` export class AppComponent implements OnInit { public tooltip : Object; ngOnInit(): void { this.tooltip = {enable : true}; } } Crosshair Use crosshair to view the value of the axis at mouse touch position. We can access crosshair functionality by defining the CrosshairService in providers and set the visible property to true. Tooltip for an axis can be enabled by using enable property of crosshairTooltip in the corresponding axis. `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [crosshair]="crosshair"> <e-stockchart-series [dataSource]='chartData' type='Candle' xName="x" yName="high" name="Gold" High=” high” Low=” low” Open=” open” Close=” close” name='India' width=2 ></e-stockchart-series> </ejs-stockchart>` export class AppComponent implements OnInit { public primaryXAxis: Object; public primaryYAxis: Object; public crosshair: Object; ngOnInit(): void { this.crosshair = {enable : true}; this.primaryXAxis = { valueType: 'DateTime', crosshairTooltip: {enable:true} }; this.primaryYAxis = { majorTickLines: {color: 'transparent', width: 0 }, crosshairTooltip: {enable: true} }; } } After enabling crosshair, it looks similar to the following figure. Period Selector Period selector allows you to select a range with specified and custom periods. This also helpful in adding the indicators, trendlines and other series type to stock chart. We can access periodSelector functionality by defining the PeriodSelectorService in providers and setting the enablePeriodSelector property to true. `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [enablePeriodSelector]="true"> <e-stockchart-series [dataSource]='chartData' type='Candle' xName='x' yName='high' name='India' width=2 ></e-stockchart-series> </ejs-stockchart>` export class AppComponent implements OnInit { public primaryXAxis: Object; ngOnInit(): void { this.primaryXAxis = { valueType: 'DateTime' } } } Range Selector RangeSelector is placed at the bottom of the stockchart. The left and right thumb of RangeSelector are used to indicate the selected range in the large collection of data. We can access the rangeSelector functionality by defining the RangeSelectorService in providers and setting the enableRangeSelector property to true. `<ejs-stockchart id="chart-container" [primaryXAxis]="primaryXAxis" [enableRangeSelector]="true"> <e-stockchart-series [dataSource]='chartData' type='Candle' xName='x' yName='high' name='India' width=2 ></e-stockchart-series> </ejs-stockchart>` export class AppComponent implements OnInit { public primaryXAxis: Object; ngOnInit(): void { this.primaryXAxis = { valueType: 'DateTime' } } } Run the application with the command “ng serve” in command prompt and you will be able to view the Angular Chart output. There are more options to explore with Angular 9 Stockchart and If you have any queries or require clarifications. ConclusionI hope you enjoyed learning about how to drag and drop EJ2 Treeview item text into RichTextEditor for Angular.You can refer to our Angular Chart featuretour 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 Chart 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, Direct-Trac, or feedback portal. We are always happy to assist you!
The Essential JS2 Angular Treeview component is used to represent hierarchical data in a tree-like structure with advanced functions to edit, drag and drop, select with CheckBox, and more. TreeView can be populated from a data source such as an array of JavaScript objects or from DataManager. This article explains how to easily get started with EJ2 Treeview component in Angular 9 project with minimal code. Prerequisites Before starting, the following tools and SDK needs to be installed in your machine to Angular 9 application: Node.js (v8.10.0 or above) Angular 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 Note: To follow and run the application in Angular 8 or earlier version, you can replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 9 application ng new treeview-angular9 cd treeview-angular9 Installing EJ2 Treeview npm install @syncfusion/ej2-angular-navigations Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 9 version. Adding Angular 9 Treeview You can add the Angular 9 treeview component by using `ejs-treeview` tag and the attributes used within this tag allows you to define other Treeview functionalities. Import TreeViewModule into app.module.ts file from the @syncfusion/ej2-angular-navigations package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TreeViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the Treeview component. [style.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; Add the Treeview component in the template file. [app.component.html] <ejs-treeview [fields]="fields"></ejs-treeview> Add the fields property with dataSource as below in a component file. [app.component.ts] export class AppComponent { fields: FieldsSettingsModel = { dataSource: [ { id: "1", text: "item 1" }, { id: "2", text: "item 2", child: [ { id: "2-1", text: "child 1" }, { id: "2-2", text: "child 2" }, ] }, { id: "3", text: "item 3" }, ] } } Run the application with the following command and you should the see the below represented output of the EJ2 Angular Treeview component. ng serve --open Checkbox Checkbox allows you to check more than one node in TreeView without affecting the UI's appearance by enabling the showCheckBox property. When this property is enabled, checkbox appears before each TreeView node text. [app.component.html] <ejs-treeview [fields]="fields" showCheckBox="true"></ejs-treeview> After mapping the properties, you should see the Treeview with checkbox enabled when you run the application as shown in the following image. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential JS2 Angular Listview component is used to represent the data in interactive hierarchical structure interface across different layouts or views, that also has features such as data-binding, template, grouping, and virtualization. This article explains how to easily get started with EJ2 Listview component in Angular 9 project with minimal code. Prerequisites Before starting, the following tools and SDK needs to be installed in your machine to Angular 9 application. Node.js (v8.10.0 or above) Angular 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 To follow and run the application in Angular 8 or earlier version, you can replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 9 application ng new listview-angular9 cd listview-angular9 Installing EJ2 Listview npm install @syncfusion/ej2-angular-lists Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 9 version. Adding Angular 9 Listview You can add the Angular 9 Listview component by using `ejs-listview` tag and the attributes used within this tag allows you to define other Listview functionalities. Import ListViewModule into app.module.ts file from the @syncfusion/ej2-angular-lists package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ListViewModule } from '@syncfusion/ej2-angular-lists'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ListViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the Listview component. [style.css] @import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-angular-lists/styles/material.css"; @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; Add the Listview component in the template file. [app.component.html] <ejs-listview id="list" [dataSource]="dataSource"></ejs-listview> Add the “dataSource” property in component file. [app.component.ts] export class AppComponent { dataSource = [ { id: '1', text: 'Apple' }, { id: '2', text: 'Microsoft' }, { id: '1', text: 'Tesla' }, { id: '1', text: 'Google' }, { id: '1', text: 'Twitter' }, ]; } Run the application with the following command and you should the see the below represented output of the EJ2 Angular Listview component. ng serve --open Checklist You can enable checkbox to select multiple items in Listview. To do so, you have to utilize the “showCheckBox” property of the Listview and set it to “true”. [app.component.html] <ejs-listview id="list" [dataSource]="dataSource" [showCheckBox]="true"></ejs-listview> Now, you should see the Listivew items with checkbox enabled to them as in the following image. Grouplist You can group each of the Listview items into their own category by utilizing the “groupBy” property of “fields” property in Listview. [app.component.html] <ejs-listview id="list" [dataSource]="dataSource" [fields]="fields"></ejs-listview> [app.component.ts] export class AppComponent { dataSource = [ { id: '1', text: 'Apple', category: "Electronics" }, { id: '2', text: 'Samsung', category: "Electronics" }, { id: '3', text: 'Microsoft', category: "Cloud" }, { id: '4', text: 'Amazon', category: "Cloud" }, { id: '5', text: 'Tesla', category: "Automotive" }, { id: '7', text: 'Rivian', category: "Automotive" }, { id: '8', text: 'Google', category: "Web" }, { id: '9', text: 'Twitter', category: "Web" }, ]; fields: FieldSettingsModel = { groupBy: 'category' }; } After modifying the code like above snippet, you should see the Grouplist in the browser as in the following image. Virtualization The Essential JS2 Listview is equipped with “Virtualization” and you can enable it by using the “enableVirtualization” property. Virtualization is a concept of displaying only the information that is currently needed instead of loading everything into browser. This type of strategy will help Listview to load immense amount of data without sacrificing performance. To use “Virtualization” in Angular 9 Listview you need to import “VirtualizationService” service provider into you “app.module.ts” file. [app.module.ts] import { ListViewModule, VirtualizationService } from '@syncfusion/ej2-angular-lists'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ListViewModule ], providers: [VirtualizationService], bootstrap: [AppComponent] }) export class AppModule { } [app.component.html] <ejs-listview id="list" [dataSource]="dataSource" [fields]="fields" [enableVirtualization]="true"></ejs-listview> Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you! ConclusionI hope you enjoyed learning about how to get started with Angular 9 CheckBox.You can refer to our Angular ListView feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Angular ListView 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, Direct-Trac, or feedback portal. We are always happy to assist you!
A quick start project that helps you to create an Angular 9 Material TimePicker component with a minimal code configuration. Angular 9 Material TimePicker The following section explains the steps required to create a simple Angular 9 Material TimePicker component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 9+ Angular CLI TypeScript 3.7+ Visual Studio code for editor Introduction The Angular 9 Material TimePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-timepicker> within the template. Dependencies Before starting with this project, the Angular 9 Material TimePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages. TimePicker require following dependent packages for rendering the TimePicker component. |-- @syncfusion/ej2-angular-calendars |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-base |-- @syncfusion/ej2-calendars |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-splitbuttons |-- @syncfusion/ej2-lists |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the TimePicker component. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 9 using following command. npm install -g @angular/cli@9.0.2 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-calendars package using the npm install command. npm install @syncfusion/ej2-angular-calendars --save Adding Angular 9 Material TimePicker You can add the Angular 9 TimePicker component by using ejs-timepicker directive and the attributes within the tag allows you to define other functionalities. Import the TimePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, TimePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular TimePicker code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the TimePicker component is rendered with the min and max properties. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public month: number = new Date().getMonth(); public fullYear: number = new Date().getFullYear(); public date: number = new Date().getDate(); public dateValue: Date = new Date(this.fullYear, this.month , this.date, 10, 0, 0); public minValue: Date = new Date(this.fullYear, this.month , this.date, 7, 0, 0); public maxValue: Date = new Date(this.fullYear, this.month, this.date, 16, 0 ,0); constructor () {} } [app.component.html] <ejs-timepicker [value]='dateValue' [min]='minValue' [max]='maxValue'></ejs-timepicker> Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Run the application with the command ng serve and a TimePicker with material theme will be displayed on the browser as follows. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Toolbar 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. Angular 9+ TypeScript 3.7+ Angular 9 Toolbar – Introduction The Angular 9 Toolbar used in this project is created from the Syncfusion `ej2-angular-toolbar` package. You can simply define it as <ejs-toolbar> within the template. Dependencies Before starting with this project, the Angular 9 Toolbar 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@9.0.2 Note:If you would like to follow and run the application in Angular 6 or Angular 7 or Angular 8, 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 <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 9 Toolbar You can add the Angular 9 Toolbar component by using `ejs-toolbar` directive and the attributes used within this tag allows you to define other toolbar functionalities. Import the ToolbarModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Toolbar 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 { ToolbarModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ToolbarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Toolbar code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-toolbar> <div> <div><button class='e-btn e-tbar-btn'>Cut</button> </div> <div><button class='e-btn e-tbar-btn'>Copy</button> </div> <div><button class='e-btn e-tbar-btn'>Paste</button> </div> <div class='e-separator'> </div> <div><button class='e-btn e-tbar-btn'>Bold</button> </div> <div><button class='e-btn e-tbar-btn'>Italic</button> </div> </div> </ejs-toolbar> 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 Toolbar with it’s item displayed on the browser. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Tab 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. Angular 9+ TypeScript 3.7+ Angular 9 Tab – Introduction The Angular 9 Tab used in this project is created from the Syncfusion `ej2-angular-tab` package. You can simply define it as <ejs-tab> within the template. Dependencies Before starting with this project, the Angular 9 Tab 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@9.0.2 Note:If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 7, 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 <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 9 Tab You can add the Angular 9 Tab component by using `ejs-tab` directive and the attributes used within this tag allows you to define other tab functionalities. Import the TabModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Tab 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 { TabModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, TabModule ], declarations: [AppComponent], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Tab code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-tab id="element"> <e-tabitems> <e-tabitem [header]='headerText[0]'> <ng-template #content> Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". </ng-template> </e-tabitem> <e-tabitem [header]='headerText[1]'> <ng-template #content> Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes. </ng-template> </e-tabitem> <e-tabitem [header]='headerText[2]'> <ng-template #content> WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription business model. </ng-template> </e-tabitem> </e-tabitems> </ejs-tab> Define the Header Teaxt code within the app.component.ts file export class AppComponent { public headerText: Object = [{ 'text': 'Twitter' }, { 'text': 'Facebook' },{ 'text': 'WhatsApp' }];} 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 Tab with it’s item displayed on the browser. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Query Builder with a minimal code configurations. Angular 9 Query Builder The following section explains you how to create a simple angular 9 Query Builder component. Prerequisites Before start, we need following items to create Angular Query Builder in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The angular 9 Query Builder is created from the Syncfusion ej2-angular-querybuilder package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project Install Angular cli 9 using following command.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 8 or Angular 7 or Angular 6, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular Query Builder After running the Angular 9 application successfully, configure the Angular Query Builder in this application. Install Angular Query Builder and EJ2 package using following command. The --save command will instruct the NPM to include a Query Builder package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-querybuilder --save Import Query Builder from installed package. 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 { QueryBuilderModule } from '@syncfusion/ej2-angular-querybuilder'; import { AppComponent } from './app.component'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, QueryBuilderModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Add the given below angular query builder’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css"; @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css"; @import "../node_modules/@syncfusion/ej2-calendars/styles/material.css"; @import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; @import "../node_modules/@syncfusion/ej2-querybuilder/styles/material.css"; Add the angular Query Builder component in app.component.ts.import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-querybuilder width="70%"> <e-columns> <e-column field="EmployeeID" label="Employee ID" type="number"></e-column> <e-column field="FirstName" label="First Name" type="string"></e-column> <e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column> <e-column field="Title" label="Title" type="string"></e-column> <e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column> <e-column field="Country" label="Country" type="string"></e-column> <e-column field="City" label="City" type="string"></e-column> </e-columns> </ejs-querybuilder>` }) export class AppComponent { public values: string[] = ['Mr.', 'Mrs.']; } Now serve the application using following command.ng serve Once the files are compiled successfully, it will serve the site at localhost:4200 Screenshot: Rendering with Rule You can render the Query Builder component with rule, using the rule property. [app.component.ts] import { Component , OnInit } from '@angular/core'; import { RuleModel } from '@syncfusion/ej2-angular-querybuilder'; @Component({ selector: 'app-root', template: `<ejs-querybuilder width="70%" [rule] = "importRules"> <e-columns> <e-column field="EmployeeID" label="Employee ID" type="number"></e-column> <e-column field="FirstName" label="First Name" type="string"></e-column> <e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column> <e-column field="Title" label="Title" type="string"></e-column> <e-column field="HireDate" label="Hire Date" type="date" format="dd/MM/yyyy"></e-column> <e-column field="Country" label="Country" type="string"></e-column> <e-column field="City" label="City" type="string"></e-column> </e-columns> </ejs-querybuilder >` }) export class AppComponent implements OnInit { public importRules: RuleModel; public values: string[] = ['Mr.', 'Mrs.']; ngOnInit(): void { this.importRules = { 'condition': 'and', 'rules': [{ 'label': 'Employee ID', 'field': 'EmployeeID', 'type': 'number', 'operator': 'equal', 'value': 1 }, { 'label': 'Title', 'field': 'Title', 'type': 'string', 'operator': 'equal', 'value': 'Sales Manager' }] }; } } Screenshot: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 DateRangePicker component with a minimal code configuration. Angular 9 DateRangePicker The following section explains the steps required to create a simple Angular 9 DateRangePicker component. Pre-requisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js (latest version) Angular 9+ Angular CLI TypeScript 3.7+ Visual studio code for editor Introduction The Angular 9 DateRangePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-daterangepicker> within the template. Dependencies Before starting with this project, the Angular 9 DateRangePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 9 using following command. npm install -g @angular/cli@9.0.2 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-calendars package through the npm install command. npm install @syncfusion/ej2-angular-calendars --save Adding Angular 9 DateRangePicker You can add the Angular 9 DateRangePicker component by using ejs-daterangepicker directive and the attributes within the tag allows you to define other functionalities. Import the DateRangePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. import { BrowserModule } from '@angular/platform-browser'; import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, DateRangePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular DateRangePicker code within the app.component.html file mapped against the templateUrl option in the app.component.ts file. Here, the DateRangePicker component is rendered using the startDate and endDate properties. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public start: Date = new Date ("10/07/2017"); public end: Date = new Date ("11/25/2017"); constructor () {} } [app.component.html] <ejs-daterangepicker id='daterangepicker' placeholder='Select a range' [startDate]='start' [endDate]='end'></ejs-daterangepicker> Refer to the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Run the application with the ng serve command, and the DateRangePicker will be displayed with start and end dates on the browser as shown below. Screenshot ConclusionI hope you enjoyed about how to get started easily with Syncfusion Angular 9 DateRangePicker component.You can refer to our Angular DateRangePicker feature tour 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 DateRangePicker 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, Direct-Trac, or feedback portal. We are always happy to assist you!
The Essential JS 2 Angular Word Processor is a component that have editing capabilities like Microsoft Word. It is also known as document editor, and it is used to create, edit, view, and print the Word documents. It provides all the common Word processing features including editing text, formatting contents, resizing image and tables, finding and replacing text, bookmarks, tables of contents, printing, and importing and exporting Word documents. This article explains how to easily integrate Syncfusion Angular Word Processor in Angular 9 application and how to enable its commonly used features using services. Prerequisites Before start, the following items are required to create Angular Word Processor in Angular 9 application: Node.js (latest version) Angular 9 Angular CLI Visual Studio code for editor Installation and application creation Install Angular cli 9 using the following command. npm install -g @angular/cli@9.0.2 Note:To follow and run the application in Angular 8, or Angular 7, or Angular 6, or Angular 5, or Angular 4, you should replace the CLI command version number with corresponding Angular version number. npm install -g @angular/cli@<CLI VERSION> Create an Angular 9 application using Angular cli. ng new angular9-app cd angular9-app Serve the Angular 9 application using the following command. ng serve Listen the application in localhost:4200. Your application will serve in the browser as follows. Integration of Angular Word Processor a.k.a Document Editor After running the Angular 9 application successfully, configure the Angular Document Editor in this application. Install Angular Document Editor and EJ2 package using the following command. The —save command will instruct the NPM to include a document editor package inside the dependencies section of the package.json. npm install @syncfusion/ej2-angular-documenteditor --save npm install @syncfusion/ej2 --save Import DocumentEditorContainerAllModule from installed package in app/app.module.ts.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { DocumentEditorContainerAllModule } from '@syncfusion/ej2-angular-documenteditor'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DocumentEditorContainerAllModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } You should refer to the CSS file for Angular Document Editor in style.css @import "../node_modules/@syncfusion/ej2/material.css"; Add the Angular Document Editor component in app.component.html. <ejs-documenteditorcontainer></ejs-documenteditorcontainer> Now, define the service URL for this Document Editor in app.component.ts. Service URL is required for opening a Word document (Refer to https://ej2.syncfusion.com/angular/documentation/document-editor/import/?no-cache=1#convert-word-documents-into-sfdt )import { Component, ViewChild } from '@angular/core'; import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ToolbarService] }) export class AppComponent { title = 'angular7-app'; public serviceLink: string; ngOnInit() { //Service URL is required for opening word documents in DocumentEditor //Documentation link: https://ej2.syncfusion.com/angular/documentation/document-editor/import/?no-cache=1#convert-word-documents-into-sfdt this.serviceLink = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'; } } After defining service link, define Document Editor’s serviceUrl in app.component.html.<ejs-documenteditorcontainer #documenteditor_default [serviceUrl]='serviceLink' style="display:block;height:600px"></ejs-documenteditorcontainer> Now, serve the application using following command. ng serve --open After all the files are compiled successfully, it will serve the site at localhost:4200 The following screenshot explains this. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Card 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. Angular 9+ TypeScript 3.7+ Dependencies The Card is pure CSS component so no other package dependencies are needed to render the Card. The Card CSS files are available in the Syncfusion `ej2-angular-layouts` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular 9 project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@9.0.2 If you would like to follow and run the application in Angular 6 or Angular 7 or Angular 8, 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 <project name> cd <project name> Install the ej2-angular-layouts package through the npm install command.npm install @syncfusion/ej2-angular-layouts --save Adding Angular 9 Card You can add the Angular 9 Card component by using class `e-card` in the `div` element. Define the Angular Card code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <div tabindex="0" class="e-card" id="basic"> <div class="e-card-header"> <div class="e-card-header-caption"> <div class="e-card-title">Advanced UWP</div> </div> </div> <div class="e-card-content"> Communicating with Windows 10 and Other Apps, the second in a five-part series written by Succinctly series author Matteo Pagani. To download the complete white paper, and other papers in the series, visit the White Paper section of Syncfusion’s Technology Resource Portal. </div> </div> The CSS files are available in `../node_modules/@syncfusion` package folder. This can be referenced in [src/styles.css] using following code [styles.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; You can also refer the CDN link of CSS reference within the index.html. [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 Card with it’s content displayed on the browser. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 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. Angular 9+ TypeScript 3.7+ Angular 9 Accordion – Introduction The Angular 9 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 9 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@9.0.2 Note:If you would like to follow and run the application in Angular 6 or Angular 7 or Angular 8, 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 <project name> cd <project name> Install the ej2-angular-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 9 Accordion You can add the Angular 9 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({ Declarations: [AppComponent], 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. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential JS 2 Pager control allows you to navigate between records which are sectioned into pages. The navigation between pages which is a key functionality of the Pager is done using built-in numeric and navigation buttons and provides easy user interaction. In this knowledge base, we will explain you the steps required to create a simple Pager in Angular9 and demonstrate the basic usage of the Pager component. Prerequisites Before we start, we need the following items to create Angular pager in the Angular 9 application Node.js (latest version) Angular 9 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 9 using the following command.npm install -g @angular/cli@9.0.0 Create an Angular 9 application using Angular cli. ng new angular9-app cd angular9-app Serve the Angular 9 application using the following command. ng serve Listen to the application at localhost:4200. Your application will serve in the browser as follows. Integration of Angular pager After running the Angular 9 application successfully, configure the Angular Pager in this application. Install Angular Data Grid and EJ2 package using the following command. npm install @syncfusion/ej2-angular-grids --save npm install @syncfusion/ej2 --save The —save command will instruct the NPM to include a grid package inside the dependencies section of the package.json. Import PagerModule from the installed package in app/app.module.tsimport { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { PagerModule} from '@syncfusion/ej2-angular-grids'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PagerModule ], bootstrap: [AppComponent] }) export class AppModule { } You should refer to the CSS file for Angular pager in global style.css file.@import "../node_modules/@syncfusion/ej2/material.css"; Now you can modify the template in app.component.ts to render the pager. import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-pager [totalRecordsCount]='20'> </ejs-pager>` }) export class AppComponent implements OnInit{ ngOnInit(): void { } } Now serve the application using the following command.ng serve --open Once all the files are compiled successfully. It will serve the site at localhost:4200 The following screenshot illustrates this. Enabling Features So far, we have learned, how to add a pager component. Now, let we check to enable the pager component features. PageSize pageSize value defines the number of records to be displayed per page. The default value for the pageSize is 12. You can set this through property binding. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-pager [totalRecordsCount]='20' [pageSize]='5'> </ejs-pager>` }) export class AppComponent implements OnInit{ ngOnInit(): void { } } PageCount pageCount value defines the number of pages to be displayed in the pager component for navigation. The default value for pageCount is 10 and the value will be updated based on the totalRecordsCount and pageSize values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-pager [totalRecordsCount]='20' [pageCount]='1'> </ejs-pager>` }) export class AppComponent implements OnInit{ ngOnInit(): void { } } Also, you can check our Angular Pager features from this page. If you have any queries or require clarifications, please let us know in comments section below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential JS 2 Pager control allows you to navigate between records which are sectioned into pages. The navigation between pages which is a key functionality of the Pager is done using built-in numeric and navigation buttons and provides easy user interaction. In this knowledge base, we will explain you the steps required to create a simple Pager in Angular9 and demonstrate the basic usage of the Pager component. Prerequisites Before we start, we need the following items to create Angular pager in the Angular 9 application Node.js (latest version) Angular 9 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 9 using the following command.npm install -g @angular/cli@9.0.0 Create an Angular 9 application using Angular cli. ng new angular9-app cd angular9-app Serve the Angular 9 application using the following command. ng serve Listen to the application at localhost:4200. Your application will serve in the browser as follows. Integration of Angular pager After running the Angular 9 application successfully, configure the Angular Pager in this application. Install Angular Data Grid and EJ2 package using the following command. npm install @syncfusion/ej2-angular-grids --save npm install @syncfusion/ej2 --save The —save command will instruct the NPM to include a grid package inside the dependencies section of the package.json. Import PagerModule from the installed package in app/app.module.tsimport { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { PagerModule} from '@syncfusion/ej2-angular-grids'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PagerModule ], bootstrap: [AppComponent] }) export class AppModule { } You should refer to the CSS file for Angular pager in global style.css file.@import "../node_modules/@syncfusion/ej2/material.css"; Now you can modify the template in app.component.ts to render the pager. import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-pager [totalRecordsCount]='20'> </ejs-pager>` }) export class AppComponent implements OnInit{ ngOnInit(): void { } } Now serve the application using the following command.ng serve --open Once all the files are compiled successfully. It will serve the site at localhost:4200 The following screenshot illustrates this. Enabling Features So far, we have learned, how to add a pager component. Now, let we check to enable the pager component features. PageSize pageSize value defines the number of records to be displayed per page. The default value for the pageSize is 12. You can set this through property binding. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-pager [totalRecordsCount]='20' [pageSize]='5'> </ejs-pager>` }) export class AppComponent implements OnInit{ ngOnInit(): void { } } PageCount pageCount value defines the number of pages to be displayed in the pager component for navigation. The default value for pageCount is 10 and the value will be updated based on the totalRecordsCount and pageSize values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-pager [totalRecordsCount]='20' [pageCount]='1'> </ejs-pager>` }) export class AppComponent implements OnInit{ ngOnInit(): void { } } Also, you can check our Angular Pager features from this page. If you have any queries or require clarifications, please let us know in comments section below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Split Button with a minimal code configurations. Angular 9 Split Button The following section explains you how to create a simple angular 9 Split Button component. Prerequisites Before start, we need following items to create Angular Split Button in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The angular 9 Split Button is created from the Syncfusion ej2-angular-splitbuttons package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project Install Angular cli 9 using following command.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 8 or Angular 7 or Angular 6, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using Angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular Split Button After running the Angular 9 application successfully, configure the Angular Split Button in this application. Install Angular Split Button and EJ2 package using following command. The --save command will instruct the NPM to include a Split Button package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-splitbuttons --save Import SplitButtonModule from installed package. 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 { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SplitButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Add the given below angular Split Button’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; @import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; Add the angular Split Button component in app.component.ts.import { Component } from '@angular/core'; import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons'; @Component({ selector: 'app-root', template: `<ejs-splitbutton content='Paste' [items]= 'items'></ejs-splitbutton>` }) export class AppComponent { public items: ItemModel[] = [ {text: 'Cut'}, {text: 'Copy'}, {text: 'Paste'} ]; } Now serve the application using following command.ng serve Once the files are compiled successfully, it will serve the site at localhost:4200 Screenshot: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Menu with a minimal code configurations. Angular 9 Menu The following section explains you how to create a simple Angular 9 Menu component. Prerequisites Before start, we need following items to create Angular Menu in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The Angular 9 Menu is created from the Syncfusion ej2-angular-navigations package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project Install Angular cli 9 using following command.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular8 or Angular7 or Angular6 or Angular5 or Angular4, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular Menu After running the Angular 9 application successfully, configure the Angular Menu in this application. Install Angular Menu and EJ2 package using following command. The --save command will instruct the NPM to include a Menu package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-navigations --save Import Menu from installed package. 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 { MenuModule } from '@syncfusion/ej2-angular-navigations'; import { AppComponent } from './app.component'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, MenuModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Add the given below angular menu’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; Add the angular Menu component in app.component.ts.import { Component } from '@angular/core'; import { MenuItemModel } from '@syncfusion/ej2-angular-navigations'; @Component({ selector: 'app-root', template: `<ejs-menu [items]='menuItems'></ejs-menu>` }) export class AppComponent { public menuItems: MenuItemModel[] = [ { text: 'File', items: [ {text: 'Open'}, {text: 'Save'}, {text: 'Exit'} ] }, { text: 'Edit', items: [ {text: 'Cut'}, {text: 'Copy'}, {text: 'Paste'} ] }, { text: 'View', items: [ {text: 'Toolbar'}, {text: 'Sidebar'} ] }, { text: 'Tools', items: [ {text: 'Spelling & Grammar'}, {text: 'Customize'}, {text: 'Options'} ] }, {text: 'Go'}, {text: 'Help'} ]; } Now serve the application using following command.ng serve Once the files are compiled successfully, it will serve the site at localhost:4200 Screenshot: Group Menu Items with Separator The separators are both horizontal and vertical lines used to separate the menu items. You can enable separators to group the menu items using the separator property. In the following sample Open and Save sub menu items are grouped using the separator property. [app.component.ts] import { Component } from '@angular/core'; import { MenuItemModel } from '@syncfusion/ej2-angular-navigations'; @Component({ selector: 'app-root', template: `<ejs-menu [items]='menuItems'></ejs-menu>` }) export class AppComponent { public menuItems: MenuItemModel[] = [ { text: 'File', items: [ {text: 'Open'}, {text: 'Save'}, {separator: true}, {text: 'Exit'} ] }, { text: 'Edit', items: [ {text: 'Cut'}, {text: 'Copy'}, {text: 'Paste'} ] }, { text: 'View', items: [ {text: 'Toolbar'}, {text: 'Sidebar'}, {text: 'Full Screen'} ] }, { text: 'Tools', items: [ {text: 'Spelling & Grammar'}, {text: 'Customize'}, {text: 'Options'} ] }, {text: 'Go'}, {text: 'Help'} ]; } Screenshot: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential JS2 Angular Gantt control is designed to visualize and edit the project schedule and track the project progress. It helps to organize and schedule the projects and you can update the project schedule through interactions like editing, dragging and resizing. In this knowledge base we are going to provide details about create and integrate an Angular 9 Gantt chart Application with a minimal code configuration. Prerequisites Before start, we need following items to create Angular Gantt in Angular 9 application Node.js (latest version) Angular 9 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 9 using following command. npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 8 or Angular 7 or 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> Create an Angular 9 application using Angular cli.ng new gantt-angular9 cd gantt-angular9 Install the ej2-angular-gantt package through the npm install command.npm install @syncfusion/ej2-angular-gantt --save Serve the Angular 9 application using following commandng serve --open Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 9 version. Adding Angular 9 Gantt chart You can add the Angular 9 Gantt component by using `ejs-gantt` directive and the attributes used within this tag allows you to define other Gantt functionalities. Import the GanttModule in app.module.ts file from the ej2-angular-gantt-package. The next step in Angular Gantt Chart creation is to import and inject the other required modules within providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { GanttModule } from '@syncfusion/ej2-angular-gantt'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GanttModule ], bootstrap: [AppComponent] }) export class AppModule { } You should refer the CSS file for Angular Gantt in styles.css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; @import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css'; @import '../node_modules/@syncfusion/ej2-gantt/styles/material.css'; Add the Angular Gantt component in app.component.html.<ejs-gantt></ejs-gantt> Now, define the row data for this Gantt in app.component.ts. Here, the JSON data is used for the Gantt.export class AppComponent implements OnInit { public data: Object[]; public taskfield: Object; ngOnInit() { this.data = [{ TaskID: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'), subtasks: [{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 5, Progress: 30 }, ] }, ]; this.taskfield = { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', child: 'subtasks' }; } } After defining the data source for Gantt, define the data source and task fields in app.component.html file.<ejs-gantt id="GanttSample" [dataSource]="data" height= "450px" width="800px" [taskFields]= "taskfield"> </ejs-gantt> Now serve the application using following command. ng serve --open Once all the files are compiled successfully. It will serve the site at localhost:4200 The following screenshot illustrates this. Enabling features Till now we have studied how to integrate Gantt control in Angular 9 application. This section describes how to inject Gantt services and enable its features. Before enable Gantt features, we need to define their services in app.module.ts. import { GanttModule, ResizeService, SortService, FilterService, SelectionService, ReorderService, EditService, DayMarkersService, ToolbarService } from '@syncfusion/ej2-angular-gantt'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GanttModule ], providers: [ ResizeService, SortService, FilterService, SelectionService, ReorderService, EditService, DayMarkersService, ToolbarService], bootstrap: [AppComponent] }) export class AppModule { } Filtering By declaring FilterService in app.module.ts, you can use filtering functionalities in Gantt. To enable filter, we need to define allowFiltering as true. <ejs-gantt id='GanttSample' [dataSource]='data' height= '450px' allowFiltering = 'true' [taskFields]= 'taskfield'> </ejs-gantt> After enabling the, filter menu UI will be obtained as follows. Event Markers By declaring DayMarkersService in app.module.ts, You can mark special events in project. As this is an object array you can mark more than one events in the Gantt chart. <ejs-gantt id='GanttSample' [dataSource]='data' height= '450px' allowFiltering = 'true' [eventMarkers] = 'eventMarkers' [taskFields]= 'taskfield'> </ejs-gantt> TS @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { public data: Object[]; public eventMarkers: any; ngOnInit() { this.eventMarkers = [{ day: '04/04/2019', label: 'Research phase' }]; } } After defining day markers. UI will be obtained as follows. Summary In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check our Angular Gantt features from this page. If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Radio Button with a minimal code configurations. Angular 9 Radio Button The following section explains you how to create a simple angular 9 Radio Button component. Prerequisites Before start, we need following items to create Angular Radio Button in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The angular 9 Radio Button is 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 9 using following command.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 6 or Angular 7 or Angular 8, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using Angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular Radio Button After running the Angular 9 application successfully, configure the Angular Radio Button in this application. Install Angular Radio Button and EJ2 package using following command. The --save command will instruct the NPM to include a Radio Button package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-buttons --save Import Radio Button module from installed package. 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 { RadioButtonModule } from '@syncfusion/ej2-angular-buttons'; import { AppComponent } from './app.component'; import { enableRipple } from '@syncfusion/ej2-base' enableRipple(true); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, RadioButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Add the given below angular Radio Button’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; Add the angular Radio Button component in app.component.ts. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<ul> <li><ejs-radiobutton label="Credit/Debit Card" name="default"></ejs-radiobutton></li> <li><ejs-radiobutton label="Internet Banking" name="default"></ejs-radiobutton></li> <li><ejs-radiobutton label="Cash on Delivery" name="default"></ejs-radiobutton></li> <li><ejs-radiobutton label="Other Wallets" name="default"></ejs-radiobutton></li> </ul>` }) 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: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Switch with a minimal code configurations. Angular 9 Switch The following section explains you how to create a simple angular 9 Switch component. Prerequisites Before start, we need following items to create Angular Switch in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The angular 9 Switch is 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 9 using following command.npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 6 or Angular 7 or Angular 8, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using Angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular Switch After running the Angular 9 application successfully, configure the Angular Switch in this application. Install Angular Switch and EJ2 package using following command. The --save command will instruct the NPM to include a Switch package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-buttons --save Import SwitchModule from installed package. 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 { SwitchModule } from '@syncfusion/ej2-angular-buttons'; import { AppComponent } from './app.component'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SwitchModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Add the given below angular Switch’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; Add the angular Switch component in app.component.ts. import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `<ejs-switch [checked]='true'></ejs-switch>` }) 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: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Scheduler with a minimal code configuration. Scheduler features covered in this Project This is an Angular 9 project created using Angular CLI 9.0.2. The Scheduler features included in this project are as follows. Angular 9 Scheduler displaying basic views with appointments loaded as JSON data. Drag and resize actions enabled for events by default. Setting current date and view for scheduler. Setting specific time zone on scheduler. 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. Angular 9+ TypeScript 3.7+ Angular 9 Scheduler – Introduction The Angular 9 Scheduler used in this project is created from the Syncfusion `ej2-angular-schedule` package. You can simply define it as <ejs-schedule> within the template. Dependencies Before starting with this project, the Angular 9 Scheduler requires to add the Syncfusion `ej2-angular-schedule` 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@9.0.2 Note:If you would like to follow and run the application in Angular 8 or earlier version, 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 <project name> cd <project name> Install the ej2-angular-schedule package through the npm install command.npm install @syncfusion/ej2-angular-schedule --save Adding Angular 9 Scheduler You can add the Angular 9 Scheduler component by using `ejs-schedule` directive and the attributes used within this tag allows you to define other scheduler functionalities. Import the ScheduleModule into app.module.ts file from the ej2-angular-schedule package. The next step in Angular Scheduler 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 {ScheduleModule, AgendaService, DayService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ScheduleModule ], providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Scheduler code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-schedule> </ejs-schedule> 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 have an empty Scheduler displayed on the browser. Now, let’s load the Scheduler with event data. Loading appointment data Let’s populate the empty Scheduler with appointments, by binding the local JSON event data to it through the dataSource property. [app.component.ts] import { Component } from '@angular/core'; import { EventSettingsModel} from '@syncfusion/ej2-angular-schedule'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public eventData: EventSettingsModel = { dataSource: [{ Id: 1, Subject: 'Board Meeting', StartTime: new Date(2018, 10, 30, 9, 0), EndTime: new Date(2018, 10, 30, 11, 0) }, { Id: 2, Subject: 'Training session on JSP', StartTime: new Date(2018, 10, 30, 15, 0), EndTime: new Date(2018, 10, 30, 17, 0) }, { Id: 3, Subject: 'Sprint Planning with Team members', StartTime: new Date(2018, 10, 30, 9, 30), EndTime: new Date(2018, 10, 30, 11, 0) }] } } Now assign this data source to the Angular Scheduler’s eventSettings property within the app.component.html file. [app.component.html] <ejs-schedule [eventSettings]="eventData"></ejs-schedule> Enabling drag-and-resize options To enable the drag and resize actions on Scheduler events, import the required module services from the ej2-angular-schedule package and then mention it in the providers section within the app.module.ts file. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import {ScheduleModule, AgendaService, DayService, DragAndDropService, ResizeService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ScheduleModule ], providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService, DragAndDropService, ResizeService], bootstrap: [AppComponent] }) export class AppModule { } Setting current date and view By default, Scheduler displays the current system date in Week view mode. To change both the display date as well as view mode, selectedDate and currentView property can be used. [app.component.ts] import { Component } from '@angular/core'; import { EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public currentDate: Date = new Date(2018, 10, 30); public newViewMode: View = 'Month'; } [app.component.html] <ejs-schedule [eventSettings]="eventData" [selectedDate]="currentDate" [currentView]="newViewMode"></ejs-schedule> Setting timezone To set specific timezone for Angular Scheduler, timezone property can be defined with valid timezone value. Here, let’s assign “UTC” to the timezone property of Scheduler, so that the events will get displayed on Scheduler with UTC time difference. <ejs-schedule [eventSettings]="eventData" [selectedDate]="currentDate" timezone="UTC" [currentView]="newViewMode"></ejs-schedule> Run the application with the command “ng serve” in command prompt and you will be able to view the Angular Scheduler output with loaded appointments and other settings. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential JS 2 Angular TreeGrid is used to visualize self-referential hierarchical data effectively in a tabular format. It expands or collapses child data using the tree column. Its feature set includes functionalities like data binding with adaptors, editing, filtering, sorting, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular TreeGrid in Angular 9 application and how to enable its commonly used features using services. Prerequisites Before start, we need following items to create Angular TreeGrid in Angular 9 application Node.js (latest version) Angular 9 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 9 using following command. npm install -g @angular/cli@9.0.2 Create an Angular 9 application using Angular cli.ng new angular9-app cd angular9-app Serve the Angular 9 application using following commandng serve Listen the application in localhost:4200. Your application will serve in browser as follows. Integration of Angular TreeGrid After running the Angular 9 application successfully, configure the Angular TreeGrid in this application. Install Angular TreeGrid and EJ2 package using following command. The —save command will instruct the NPM to include a treegrid package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-treegrid --save npm install @syncfusion/ej2 --save Import TreeGridModule from installed package in app/app.module.ts.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TreeGridModule ], bootstrap: [AppComponent] }) export class AppModule { } You should refer the CSS file for Angular TreeGrid in style.CSS. For example, here we have used material theme.@import "../node_modules/@syncfusion/ej2/material.css"; Add the Angular TreeGrid component in app.component.html.<ejs-treegrid></ejs-treegrid> Now, define the row data for this TreeGrid in app.component.ts. Here, the JSON data is used for the TreeGrid.export class AppComponent implements OnInit { public data: Object[]; ngOnInit() { this.data = [{ taskID: 1, taskName: 'Planning', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), progress: 100, duration: 5, priority: 'Normal', approved: false, subtasks: [ { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false }, { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true }, { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false }, { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true } ] }, ]; } } After defining row data, define TreeGrid’s dataSource, columns, treeColumnIndex, childMapping in app.component.html. In Columns, the textAlign is defined to customize the alignment of columns, Width is to defined the column width in pixels and format is defined to customize the cell value to Number and Date options by I18n standard. <ejs-treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1'> <e-columns> <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column> <e-column field='taskName' headerText='Task Name' width='200'></e-column> <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column> <e-column field='endDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column> <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column> <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column> <e-column field='priority' headerText='Priority' width='90'></e-column> </e-columns> </ejs-treegrid> Now serve the application using following command. ng serve --open Once all the files are compiled successfully. It will serve the site at localhost:4200. The following screenshot illustrates this. Enabling Features So far, we have learned, how to add TreeGrid in Angular 9 Application. This section describes how to inject treegrid services and enable its features. Before enable treegrid features, we need to define their services in app.module.ts. import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GridModule ], providers: [PageService, SortService, FilterService], bootstrap: [AppComponent] }) export class AppModule { } Paging After defining the PageService in providers. Now we can access Paging functionality from TreeGrid. To enable pager in TreeGrid, set the allowPaging property to true. <ejs-treegrid [dataSource]='data' [allowPaging]='true' childMapping='subtasks' [treeColumnIndex]='1'> <e-columns> <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column> <e-column field='taskName' headerText='Task Name' width='190'></e-column> <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column> <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column> <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column> <e-column field='priority' headerText='Priority' width='90'></e-column> </e-columns> </ejs-treegrid> Sorting After SortService is defined in providers. You can inherit sorting behaviors. This can be used in TreeGrid by setting allowSorting property as true. <ejs-treegrid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' childMapping='subtasks' [treeColumnIndex]='1'> <e-columns> <e-column field='taskID' headerText='Task ID' width='70' textAlign='Right'></e-column> <e-column field='taskName' headerText='Task Name' width='190'></e-column> <e-column field='startDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column> <e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column> <e-column field='progress' headerText='Progress' width='80' textAlign='Right'></e-column> <e-column field='priority' headerText='Priority' width='90'></e-column> </e-columns> </ejs-treegrid> Filtering By declaring FilterService in app.module.ts. You can use filtering functionalities in TreeGrid. In this Angular 9 TreeGrid, enable Filter menu to filter treegrid records. To enable Filter menu, we need to define allowFiltering as true and have to define filterSettings.type as Menu. <ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings'> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column> <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column> <e-column field='Freight' textAlign='Right' format='c2' width='120'></e-column> <e-column field='ShipCountry' headerText='Ship Country' width='140'></e-column> </e-columns> </ejs-grid> TS @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { public data: Object[]; public filterSettings: Object; ngOnInit() { this.filterSettings = { type: 'Menu' }; this.data = [{ taskID: 1, taskName: 'Planning', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), progress: 100, duration: 5, priority: 'Normal', approved: false, subtasks: [ { taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false }, { taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Low', approved: true }, { taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false }, { taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true } ] }, ]; } } After defining filter menu. Filter UI will be obtained as follows. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 Context Menu with a minimal code configurations. Angular 9 Context Menu The following section explains you how to create a simple Angular 9 Context Menu component. Prerequisites Before start, we need following items to create Angular Context Menu in Angular 9 application Node.js (latest version) Angular Angular CLI Visual studio code for editor. Typescript 3.7+ Dependencies The Angular 9 Context Menu is created from the Syncfusion ej2-angular-navigations package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project Install Angular cli 9 using following command. npm install -g @angular/cli@9.0.2 Note:If you would like to follow and run the application in Angular 8 or Angular 7 or Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with the corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Create a new Angular 9 project using angular cli and navigate to that folder.ng new <project name> cd <project name> Adding Angular Context Menu After running the Angular 9 application successfully, configure the Angular Context Menu in this application. Install Angular Context Menu and EJ2 package using following command. The --save command will instruct the NPM to include a Context Menu package inside the dependencies section of the package.json.npm install @syncfusion/ej2-angular-navigations --save Import Context Menu from installed package. 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 { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'; import { AppComponent } from './app.component'; import { enableRipple } from '@syncfusion/ej2-base'; enableRipple(true); @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ContextMenuModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {} Add the given below angular context menu’s styles in styles.css.@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; @import "../node_modules/@syncfusion/ej2-base/styles/material.css"; /* Context Menu target */ #target { border: 1px dashed; height: 150px; padding: 10px; position: relative; text - align: justify; color: gray; user - select: none; } Add the angular Context Menu component in app.component.ts.import { Component } from '@angular/core'; import { MenuItemModel } from '@syncfusion/ej2-navigations'; @Component({ selector: 'app-root', template`<div id="target">Right click / Touch hold to open the ContextMenu</div> <ejs-contextmenu id='contextmenu' target='#target' [items]= 'menuItems'></ejs-contextmenu>` }) export class AppComponent { public menuItems: MenuItemModel[] = [ { text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }]; } Now serve the application using following command.ng serve Once the files are compiled successfully, it will serve the site at localhost:4200 Screenshot: Rendering Items with Separator The Separators are the horizontal lines used to separate the menu items. You can enable separators to group the menu items using the separator property. In the following sample Cut, Copy, and Paste menu items are grouped using separator property. [app.component.ts] import { Component } from '@angular/core'; import { MenuItemModel } from '@syncfusion/ej2-navigations; @Component({ selector: 'app-root', template`<div id="target">Right click / Touch hold to open the ContextMenu</div> <ejs-contextmenu id='contextmenu' target='#target' [items]= 'menuItems'></ejs-contextmenu>` }) export class AppComponent { public menuItems: MenuItemModel[] = [ { text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }, { separator: true }, { text: 'Font' }, { text: 'Paragraph' }]; } Screenshot: Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 9 MultiSelect Dropdown with a minimal code configuration. Angular 9 MultiSelect The following section explains the steps required to create a simple Angular 9 Multiselect component. Project pre-requisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js (latest version) Angular 9+ Angular CLI TypeScript 3.7+ Visual studio code for editor Introduction The Angular 9 MultiSelect Dropdown used in this project is created from the Syncfusion `ej2-angular-dropdowns ` package. You can simply define it as <ejs-multiselect> within the template. Dependencies Before starting with this project, the Angular 9 MultiSelect Dropdown requires to add the Syncfusion `ej2-angular-dropdowns` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular project To create the Angular project using the Angular CLI tool, follow the steps. Install the Angular CLI application in your machine.npm install -g @angular/cli@9.0.2 Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-dropdowns package through the npm install command.npm install @syncfusion/ej2-angular-dropdowns --save Adding Angular 9 MultiSelect Dropdown You can add the Angular 9 MultiSelect Dropdown component by using the `ejs-multiselect` directive. The attributes used within this tag allow you to define other MultiSelect Dropdown functionalities. To add the Angular 9 MultiSelect Dropdown, follow the steps: Import the MultiSelectAllModule into the app.module.ts file from the ej2-angular- dropdowns package. 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 { MultiSelectAllModule } from '@syncfusion/ej2-angular-dropdowns'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, MultiSelectAllModule ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular MultiSelect Dropdown code within the app.component.html file which is mapped against the templateUrl option in the app.component.ts file. [app.component.html] <ejs-multiselect></ejs-multiselect> Refer to the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Run the application with the ng serve command, and an empty MultiSelect Dropdown will be displayed on the browser. Now, you can load the MultiSelect Dropdown with data. Screenshot Loading data You can populate the empty MultiSelect Dropdown with data by using the JSON data through the `dataSource` property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { // define the JSON of data public countries: { [key: string]: Object; }[] = [ { Name: 'Australia', Code: 'AU' }, { Name: 'Bermuda', Code: 'BM' }, { Name: 'Canada', Code: 'CA' }, { Name: 'Cameroon', Code: 'CM' }, { Name: 'Denmark', Code: 'DK' }, { Name: 'France', Code: 'FR' }, { Name: 'Finland', Code: 'FI' }, { Name: 'Germany', Code: 'DE' }, ]; // maps the local data column to fields property public localFields: Object = { text: 'Name', value: 'Code' }; // set the placeholder to MultiSelect Dropdown input element public localWaterMark: string = 'Select countries'; } [app.component.html] <ejs-multiselect id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark'></ejs-multiselect> Screenshot Setting initial select value on MultiSelect Dropdown You can populate the empty MultiSelect Dropdown with value by binding the string data through the `value` property initially. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { public value: string[] = ['AU']; } Now, assign this value to the `value` property of Angular MultiSelect Dropdown within the app.component.html file. [app.component.html] <ejs-multiselect id='localData' #local [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark' [value]='value' ></ejs-multiselect> Screenshot: Getting the selected value on form submit By using the ngModel, you can get the value from the ngform submit [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { onSubmit(form: NgForm): void { console.log(form.value.name); } } [app.component.html] <form #form='ngForm' (ngSubmit)="onSubmit(form)"> <div class="form-group"> <ejs-multiselect id='localData' name='name' #local='ngModel' [(value)]='value'[(ngModel)]='value' [dataSource]='countries' [fields]='localFields' [placeholder]='localWaterMark'></ejs-multiselect> <button type="submit" ejs-button>Submit</button> </div> </form> Run the application with the command ng serve in the command prompt. You can view the Angular MultiSelect Dropdown output with the data and other settings. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
