The Essential JS 2 Angular File Manager is a graphical user interface component for managing the file system that allows users to perform the most common file operations such as copying, moving, accessing, editing, sorting and drag and drop the files or folders. This component also provides easy navigation for the browsing folders to select a file or folder from the file system. This KB article explains you about, how to easily integrate Syncfusion Angular File Manager in the Angular 6 application with its commonly used features. Prerequisites Before we start, we need the following items to create the Angular File Manager in Angular 6 application. Node.js Angular 6 Angular CLI Visual studio code for editor. Installation and application creation Install the Angular CLI 6 using the following command.npm install -g @angular/cli@6.0.3 Note:If you want to follow and run the application in Angular 7, Angular 5, or Angular 4, you need to replace the CLI command version number with corresponding angular version number with the following command.npm install -g @angular/cli@<CLI VERSION> Create an Angular 6 application using the following command.ng new filemanager-app cd filemanager-app Integration of Angular File Manager After creating the application, install the packages for the File Manager component and its dependencies into your application using the following command.npm install @syncfusion/ej2-angular-filemanager --save Now, the environment-related configurations have been completed. Next, integrate your Angular File Manager component into the application. To import the File Manager component in the app.module.ts, include it in the declarations.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FileManagerModule } from '@syncfusion/ej2-angular-filemanager'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FileManagerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Essential JS 2 components support a set of built-in-themes. Here, the material theme is used for the File Manager. To add the material theme in your application, import the File Manager and its dependent component’s styles in style.css.@import '../node_modules/@syncfusion/ej2-base/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-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-layouts/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css'; Add the Angular File Manager component with the ajaxSettings property in app.component.html. The ajaxSettings must be defined while initializing the file manager. File manager utilizes the URL’s mentioned in the ajaxSettings to send file operation request to the server.<ejs-filemanager id='default-filemanager' [ajaxSettings]='ajaxSettings'> </ejs-filemanager> Now, define the file provider service link for the File Manager in app.component.ts.import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'filemanager-app'; public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; public ajaxSettings: object = { url: this.hostUrl + 'api/FileManager/FileOperations' }; } Here, we have rendered the File Manager using the online service. It can also be rendered using local service. For this, first clone or download this repository. After that, open the solution, launch it, and replace the hostUrl with the url of the launched service. After initializing the File Manger component, you can use the following command to see the output in a browser.ng serve After all the files have been compiled successfully, it will serve the site at localhost:4200, The following screenshot explains this. To perform download, upload and image preview support, define the downloadUrl, uploadUrl and getImageUrl link in the ajaxSettings property of the File Manager component.import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'filemanager-app'; public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/'; public ajaxSettings: object = { url: this.hostUrl + 'api/FileManager/FileOperations', downloadUrl: this.hostUrl + 'api/FileManager/Download', uploadUrl: this.hostUrl + 'api/FileManager/Upload', getImageUrl: this.hostUrl + 'api/FileManager/GetImage' }; } Injecting Feature Modules Basically, the File Manager component contains a context menu for performing file operations, large icons view for displaying the files and folders, and a breadcrumb for navigation. However, these basic functionalities can be extended by using the additional feature modules like toolbar, navigation pane, and details view to simplify the navigation and file operations within the file system. The above modules can be injected into the File Manager by importing them as providers in app.module.ts. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { FileManagerModule, ToolbarService, NavigationPaneService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FileManagerModule ], providers: [ToolbarService, NavigationPaneService, DetailsViewService], bootstrap: [AppComponent] }) export class AppModule { } Drag and Drop Support File Manager allows managing the files or folders within the file system using Drag and Drop operation. This feature can be enabled or disabled by using the allowDragAndDrop property of the File Manager. <ejs-filemanager id='default-filemanager' [ajaxSettings]='ajaxSettings' [allowDragAndDrop]='true'> </ejs-filemanager> Managing storage services File manager supports managing data from different storage services like, Physical Storage Physical File Provider – ASP.NET Core, ASP.NET MVC Node.js framework Cloud Storage Microsoft azure cloud storage Google drive cloud storage Database Storage SQL server database Summary The runnable sample application prepared from the above steps has been committed in this location. You can check the features of Angular File Manager here. Also, refer to the documentation and online samples for more details about the File Manager control. 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 forum or Direct-Trac. We are happy to assist you!
ListView Angular component represent data in interactive hierarchical structure interface across different layouts or views, that also has the features of data-binding, template rendering, and grouping. Prerequisites Before start, ensure below items configured to create Angular ListView in Angular 6 application Node.js (latest version) Angular 6 Angular CLI Visual Studio Code for Editor. Installation and application creation Install Angular CLI 6 using following command. npm install @angular/cli@6.0.3 -g Create a simple Angular 6 application using below command ng new ListProj The Angular dependencies are installed while creating the project. Now change the directory to application’s root folder and serve the Angular CLI application with below commands. cd ListProj ng serve -o Listen the application in localhost. Your application will serve in browser as follows. Integration of ListView After running the Angular 6 application successfully, configure the ListView in this application. Install EJ2 ListView dependencies using following command.npm install @syncfusion/ej2-angular-lists --save Import ListViewModule from installed package in app/app.module.ts. Refer to the below code snippet. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ListViewModule } from '@syncfusion/ej2-angular-lists'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ListViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Refer the CSS file for ListView in styles.CSS file. @import "@syncfusion/ej2-base/styles/material.css"; @import "@syncfusion/ej2-angular-lists/styles/material.css"; Add the Angular ListView component in app.component.html. Refer below code snippet to initialize and bind the dataSource for ListView. <ejs-listview id='list' [dataSource]='data'></ejs-listview> Now, define the data for this ListView in app.component.ts. Here, the JSON data is used for the ListView.export class AppComponent { public data: Object = [ { 'text': 'Display', 'id': 'list-01' }, { 'text': 'Notification', 'id': 'list-02' }, { 'text': 'Sound', 'id': 'list-03' }, { 'text': 'Apps', 'id': 'list-04' }, { 'text': 'Storage', 'id': 'list-05' }, { 'text': 'Battery', 'id': 'list-06' } ]; } Now serve the application using following command.ng serve -o Once all the files are compiled successfully, it will serve the application at localhost. The following screenshot illustrates ListView. Enabling Features This section describes how to enable the ListView component features. CheckBox Feature To enable checkbox in ListView, set the showCheckBox property to true. <ejs-listview id='list' [dataSource]='data' [showCheckBox]="true"></ejs-listview> And, we need to add the Button component styles in styles.css file to render the CheckBox in ListView. @import "@syncfusion/ej2-base/styles/material.css"; @import "@syncfusion/ej2-angular-lists/styles/material.css"; @import "@syncfusion/ej2-buttons/styles/material.css"; Grouping Feature ListView supports to group the data based on data category. The category of each list item can be mapped with groupBy field in the data table and which supports single-level navigation. Refer to the below code snippet to map groupBy property in fields of ListView. <ejs-listview id='list' [dataSource]='data' [fields]='fields'></ejs-listview> import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public data: Object = [ { 'text': 'Display', 'id': 'list-01', 'category': 'Device1' }, { 'text': 'Notification', 'id': 'list-02', 'category': 'Device1' }, { 'text': 'Sound', 'id': 'list-03', 'category': 'Device1' }, { 'text': 'Apps', 'id': 'list-04', 'category': 'Device2' }, { 'text': 'Storage', 'id': 'list-05', 'category': 'Device2' }, { 'text': 'Battery', 'id': 'list-06', 'category': 'Device2' } ]; public fields : Object = { text: 'text', id: 'id', groupBy: 'category'} } Nested List Feature ListView component supports Nested list items. For that, define child property in array of JSON. The below samples illustrate, how the list is generated with the nested element. <ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' [showHeader]='true' headerTitle='Continent'></ejs-listview> import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public data: Object = [ { 'text': 'Asia', 'id': '01', 'category': 'Continent', 'child': [{ 'text': 'India', 'id': '1', 'category': 'Asia', 'child': [{ 'text': 'Delhi', 'id': '1001', 'category': 'India', }, { 'text': 'Kashmir', 'id': '1002', 'category': 'India', }, { 'text': 'Goa', 'id': '1003', 'category': 'India', }, ] }, { 'text': 'China', 'id': '2', 'category': 'Asia', 'child': [{ 'text': 'Zhejiang', 'id': '2001', 'category': 'China', }, { 'text': 'Hunan', 'id': '2002', 'category': 'China', }, { 'text': 'Shandong', 'id': '2003', 'category': 'China', }] }] }, ]; public fields : Object = { text: 'text', id: 'id'} } Here I have appended single level data to ListView. Refer this link for whole data. Refer to the below screenshot for Nested Child data. Template Feature ListView items can be customized with the help of the template property. To customize list items in your application, set your customized template element inside ng-template directive. NOTE: Also, we provided the built-in CSS classes to customize the list-items. Refer to this link. Refer to the below code snippet to render the Customized ListView. [app.component.html] <div id="sample"> <ejs-listview id='List' [dataSource]='data' headerTitle='Contacts' cssClass='e-list-template' [showHeader]='true' sortOrder='Ascending'> <ng-template #template let-data=""> <div class="e-list-wrapper e-list-multi-line e-list-avatar"> <span class="e-avatar e-avatar-circle" *ngIf="data.avatar !== ''">{{data.avatar}}</span> <span class="{{data.pic}} e-avatar e-avatar-circle" *ngIf="data.pic !== '' "> </span> <span class="e-list-item-header">{{data.text}}</span> <span class="e-list-content">{{data.contact}}</span> </div> </ng-template> </ejs-listview> </div> In this template sample, we used our Syncfusion Avatar component to render the image in ListView. So, we need to refer the Layout component CSS files in application. To do that, install Avatar components dependencies with below command and refer the CSS in styles.css file. npm install @syncfusion/ej2-layouts --save [styles.css] @import "@syncfusion/ej2-layouts/styles/material.css"; [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public data: { [key: string]: Object; }[] = [ { text: "Jenifer", contact: "(206) 555-985774", id: "1", avatar: "", pic: "pic01" }, { text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" }, { text: "Isabella", contact: "(206) 555-8122", id: "4", avatar: "", pic: "pic02" }, { text: "William ", contact: "(206) 555-9482", id: "5", avatar: "W", pic: "" }, { text: "Jacob", contact: "(71) 555-4848", id: "6", avatar: "", pic: "pic04" }, { text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" }, { text: "Oliver", contact: "(71) 555-5598", id: "8", avatar: "", pic: "pic03" }, { text: "Charlotte", contact: "(206) 555-1189", id: "9", avatar: "C", pic: "" } ]; } [app.component.css] #List { margin: 0 auto; font-size: 15px; border: 1px solid #ccc; } .pic01 { background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png"); } .pic02 { background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png"); } .pic03 { background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png"); } .pic04 { background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png"); } #List .e-list-item:nth-child(1) .e-avatar { background-color: #039be5; } #List .e-list-item:nth-child(2) .e-avatar { background-color: #e91e63; } #List .e-list-item:nth-child(6) .e-avatar { background-color: #009688; } #List .e-list-item:nth-child(8) .e-avatar { background-color: #0088; }
A quick start project that helps you to create an Angular 6 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 6+ TypeScript 2.6+ Angular 6 Toolbar – Introduction The Angular 6 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 6 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@6.2.7 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 6 Toolbar You can add the Angular 6 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. There are more options to explore with Angular 6 Toolbar.Conclusion I hope you enjoyed learning about how to get started easily with Syncfusion Angular 6 Toolbar.You can refer to our Angular toolbar 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 toolbar example to understand how to create and manipulate data.For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our 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 6 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 6+ TypeScript 2.6+ Angular 6 Accordion – Introduction The Angular 6 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 6 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@6.2.7 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 6 Accordion You can add the Angular 6 Accordion component by using `ejs-accordion` directive and the attributes used within this tag allows you to define other accordion functionalities. Import the AccordionModule into app.module.ts file from the ej2-angular-navigations package. The next step in Angular Accordion creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { AccordionModule } from '@syncfusion/ej2-angular-navigations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, AccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Accordion code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-accordion> <e-accordionitems> <e-accordionitem expanded='true'> <ng-template #header> <div>ASP.NET</div> </ng-template> <ng-template #content> <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>ASP.NET MVC</div> </ng-template> <ng-template #content> <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>JavaScript</div> </ng-template> <ng-template #content> <div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed. </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and see the Accordion with it’s item displayed on the browser. There are more options to explore with Angular 6 Accordion.
Our Angular Accordion component allows you render structural directives using structural directives in your application like regular Angular components. This section explains how to use them to render this Accordion in your project. <ng-template> Accordion is provided with the <ng-template> support for both its header and content properties. You can use this ng-template to render both these properties. You can also render another component in the Accordion control. <ejs-accordion> <e-accordionitems> <e-accordionitem expanded="true"> <ng-template #header> <div>Calender</div> </ng-template> <ng-template #content> <div> <ejs-calendar></ejs-calendar> </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>DatePicker</div> </ng-template> <ng-template #content> <div> <ejs-datepicker></ejs-datepicker> </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>DateTimePicker</div> </ng-template> <ng-template #content> <div> <ejs-datetimepicker></ejs-datetimepicker> </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the demo sample. <ng-for> The ng-for is like for loop; it is used to iterate the element. You can use the ng-for conditional structural directive in our Accordion as demonstrated in the following code. <ejs-accordion expandMode="Single"> <e-accordionitems> <e-accordionitem *ngFor="let item of serviceList;"> <ng-template #header> <div id="header">{{item.name}}</div> </ng-template> <ng-template #content> <li *ngFor="let sub of item.subdata">{{sub.name}}</li> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the sample. <ng-if> The ng-if is the simplest structural directive; it takes Boolean values to make the element appear or disappear in DOM. This is also supported in our Angular Accordion directive and item directives. <ejs-accordion expandMode="Single"> <e-accordionitems> <e-accordionitem *ngFor="let item of serviceList;"> <ng-template #header [ngIf]="item.render"> <div id="header">{{item.name}}</div> </ng-template> <ng-template #content [ngIf]="item.render"> <li *ngFor="let sub of item.subdata">{{sub.name}}</li> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the sample. You can use the above all directives (<ng-if>, <ng-for>, and <ng-template>) to render the Accordion control. In this following sample, the Accordion items are iterated using the <ng-for> directive, and the item is checked using <ng-if>. Finally, the data is shown using <ng-template>. <ejs-accordion expandMode="Single"> <e-accordionitems> <e-accordionitem *ngFor="let item of serviceList;"> <ng-template #header> <div id="header">{{item.name}}</div> </ng-template> <ng-template #content [ngIf]="item.render"> <li *ngFor="let sub of item.subdata">{{sub.name}}</li> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion> You can find the sample.
A quick start project that helps you to create an Angular 6 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 6+ TypeScript 2.6+ 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 6 project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@6.2.7 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 6 Card You can add the Angular 6 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. There are more options to explore with Angular 6 Card.ConclusionI hope you enjoyed learning about how to get started easily with Syncfusion Angular 6 Card.You can refer to our Angular Card 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 Card 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 6 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 6+ TypeScript 2.6+ Angular 6 Tab – Introduction The Angular 6 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 6 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@6.2.7 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 6 Tab You can add the Angular 6 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 ], 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> 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. There are more options to explore with Angular 6 Tab.
The Essential JS 2 Angular Data Grid/DataTable is used to display data from JSON or web service in a tabular format. Its feature set includes functionalities like data binding with adaptors, editing, filtering, sorting, grouping, paging, freezing rows and columns, 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 Data Grid in Angular 6 application and how to enable its commonly used features using services. Prerequisites Before start, we need following items to create Angular Data Grid in Angular 6 application Node.js (latest version) Angular 6 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 6 using following command.npm install -g @angular/cli@6.1.1 Create an Angular 6 application using Angular cli.ng new angular6-app cd angular6-app Serve the Angular 6 application using following commandng serve Listen the application in localhost:4200 . Your application will serve in browser as follows. Integration of Angular Data Grid After running the Angular 6 application successfully, configure the Angular DataGrid in this application. Install Angular Data Grid and EJ2 package using 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 GridModule from installed package in app/app.module.ts.import { NgModule } from '@angular/core'; import { GridModule } from '@syncfusion/ej2-angular-grids'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GridModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } You should refer the CSS file for Angular Data Grid in style.CSS@import "../node_modules/@syncfusion/ej2/material.css"; Add the Angular Data Grid component in app.component.html.<ejs-grid></ejs-grid> Now, define the row data for this DataGrid in app.component.ts. Here, the JSON data is used for the Grid.export class AppComponent implements OnInit { public data: Object[]; ngOnInit() { this.data = [ { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France' }, { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: ' Germany' }, { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil' }, { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France' }, { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, ShipCountry: 'Belgium' }, { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, ShipCountry: 'Brazil' }, { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, ShipCountry: 'Switzerland' }, { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, ShipCountry: 'Switzerland' }, { OrderID: 10256, CustomerID: 'SUPRD', Freight: 13.97, ShipCountry: 'Brazil' }, { OrderID: 10257, CustomerID: 'WELLI', Freight: 14.23, ShipCountry: 'Venezuela' }, { OrderID: 10258, CustomerID: 'VICTE', Freight: 18.33, ShipCountry: 'France' }, { OrderID: 10259, CustomerID: 'WELLI', Freight: 28.13, ShipCountry: 'Brazil' }, { OrderID: 10260, CustomerID: 'CHOPS', Freight: 48.34, ShipCountry: 'Switzerland' }, { OrderID: 10261, CustomerID: 'SUPRD', Freight: 32.73, ShipCountry: ' Germany' }, { OrderID: 10262, CustomerID: 'TOMSP', Freight: 12.31, ShipCountry: 'Switzerland' }, { OrderID: 10263, CustomerID: 'VICTE', Freight: 23.77, ShipCountry: 'Brazil' }, { OrderID: 10264, CustomerID: 'SUPRD', Freight: 43.47, ShipCountry: 'Venezuela' }, { OrderID: 10265, CustomerID: 'CHOPS', Freight: 53.37, ShipCountry: 'Belgium' }, ]; } } After defining row data, define Data Grid’s dataSource and columns in app.component.html. In Columns, the textAlign to customize the alignment of columns, Width is to define the column width in pixels and format is defined to customize the cell value to Number and Date options by I18n standard.<ejs-grid [dataSource]='data'> <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> 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 Data Grid in Angular 6 Application. This section describes how to inject data grid services and enable its features. Before enable data grid 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, GroupService], bootstrap: [AppComponent] }) export class AppModule { } Paging After defining the PageService in providers. Now we can access Paging functionality from Data Grid. To enable pager in Data Grid, set the allowPaging property to true. <ejs-grid [dataSource]='data' [allowPaging]='true'> <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> Sorting After SortService is defined in providers. You can inherit sorting behaviors. This can be used in Data Grid by settingallowSorting property as true. <ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true'> <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> Filtering By declaring FilterService in app.module.ts. You can use filtering functionalities in Data Grid. In this Angular 6 Data Grid,enable Filter menu to filter data grid 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> @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 = [ { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France' }, { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: ' Germany' }, { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil' }, { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France' }, { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, ShipCountry: 'Belgium' }, { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, ShipCountry: 'Brazil' }, { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, ShipCountry: 'Switzerland' }, { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, ShipCountry: 'Switzerland' }, { OrderID: 10256, CustomerID: 'SUPRD', Freight: 13.97, ShipCountry: 'Brazil' }, { OrderID: 10257, CustomerID: 'WELLI', Freight: 14.23, ShipCountry: 'Venezuela' }, { OrderID: 10258, CustomerID: 'VICTE', Freight: 18.33, ShipCountry: 'France' }, { OrderID: 10259, CustomerID: 'WELLI', Freight: 28.13, ShipCountry: 'Brazil' }, { OrderID: 10260, CustomerID: 'CHOPS', Freight: 48.34, ShipCountry: 'Switzerland' }, { OrderID: 10261, CustomerID: 'SUPRD', Freight: 32.73, ShipCountry: ' Germany' }, { OrderID: 10262, CustomerID: 'TOMSP', Freight: 12.31, ShipCountry: 'Switzerland' }, { OrderID: 10263, CustomerID: 'VICTE', Freight: 23.77, ShipCountry: 'Brazil' }, { OrderID: 10264, CustomerID: 'SUPRD', Freight: 43.47, ShipCountry: 'Venezuela' }, { OrderID: 10265, CustomerID: 'CHOPS', Freight: 53.37, ShipCountry: 'Belgium' }, ]; } } After defining filter menu. Filter UI will be obtained as follows. Grouping If GroupService is injected in providers then enable allowGrouping in the grid to access its functionalities. <ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [allowGrouping]='true' > <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> 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 Data Grid 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 6 DatePicker component with a minimal code configuration. Angular 6 DatePicker The following section explains the steps required to create a simple Angular 6 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 6+ Angular CLI TypeScript 2.6+ Visual studio code for editor Introduction The Angular 6 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 6 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 6 using following command. npm install @angular/cli@6.0.3 -g 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 6 DatePicker You can add the Angular 6 DatePicker component by using ejs-datepicker directive and the attributes within the tag allows you to define other functionalities.ssss 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 { AppCompnent } 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. Screenshot 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. Also, you can download and run the sample from this GitHub Repository. For more information about DatePicker functionalities, refer UG Documentation, API Reference and Samples section.
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 6 Gantt chart Application with a minimal code configuration. Prerequisites Before start, we need following items to create Angular Gantt in Angular 6 application Node.js (latest version) Angular 6 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 6 using following command.npm install -g @angular/cli@6.1.1 Create an Angular 6 application using Angular cli.ng new gantt-angular6 cd gantt-angular6 Install the ej2-angular-gantt package through the npm install command.npm install @syncfusion/ej2-angular-gantt --save Serve the Angular 6 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 6 version. Adding Angular 6 Gantt chart You can add the Angular 6 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 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-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 6 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 { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; 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!
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 6 application and how to enable its commonly used features using services. Prerequisites Before start, we need following items to create Angular TreeGrid in Angular 6 application Node.js (latest version) Angular 6 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 6 using following command. npm install -g @angular/cli@6.1.1 Create an Angular 6 application using Angular cli.ng new angular6-app cd angular6-app Serve the Angular 6 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 6 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 @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 6 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 6 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 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 TreeGrid 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 create an Angular 6 maps with minimal code configuration. Map features covered in this project This Angular 6 map project is created using Angular CLI 1.7.4. The map features listed in this project are as follows. Legends for maps. Markers for maps. Tooltips for maps. Project pre-requisites Make sure that you have the following compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 6+ TypeScript 2.6+ Angular 6 Maps – Introduction The Angular 6 maps used in this project is created from the Syncfusion `ej2-angular-maps` package. You can simply define map as <ejs-maps> within a template. Dependencies Before starting with this project, you need to add the Syncfusion `ej2-angular-maps` package to the Angular 6 maps from npmjs, which is 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 @angular/cli@1.7.4 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 maps component After the Angular application has been created, use the following command to install the maps package. cd my-app npm install @syncfusion/ej2-angular-maps –save The –save flag saves the maps package as a dependency in the package.json file. All the configurations related to environment setup has now been completed. Before configuring the maps, a component is needed to render the maps. To create an Angular component, use the following Angular CLI command. ng generate component maps Now, import the map module in the app.module.ts file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MapsComponent } from './maps/maps.component'; import { MapsAllModule} from '@syncfusion/ej2-angular-maps'; @NgModule({ declarations: [ AppComponent, MapsComponent ], imports: [ BrowserModule, AppRoutingModule, MapsAllModule ], bootstrap: [AppComponent] }) export class AppModule { } Creating the maps component All the configurations related to the maps has now been completed. Now, you can define first map in the map.component.html file. <ejs-maps></ejs-maps> Then, add the maps component in the app.component.html file. <app-maps></app-maps> Go to the application directory, and launch the server using following command. ng serve -open The following screenshot illustrate the view of the maps after all the files have been compiled successfully. Injecting modules Now, in the basic maps, some features are modularized, and they are 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 maps with legends, markers, or tooltips, define the providers of the app.module.ts file. This service provides access to the markers, legends, and tooltips functionalities. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MapsComponent } from './maps/maps.component'; import { MapsModule, MarkerService, LegendService, MapsTooltipService } from '@syncfusion/ej2-angular-maps'; @NgModule({ declarations: [ AppComponent, MapsComponent ], imports: [ BrowserModule, AppRoutingModule, MapsModule ], providers: [LegendService, MarkerService, MapsModule, MapsTooltipService], bootstrap: [AppComponent] }) The following code sample demonstrates how to render the maps. <ejs-maps id='container' style="display:block;" > <e-layers> <e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'> </e-layer> </e-layers> </ejs-maps> import { Component, OnInit } from '@angular/core'; import { world_Map } from './worldMap'; import {colorMapping} from './colormapping'; @Component({ selector: 'app-maps', templateUrl: './maps.component.html', styleUrls: ['./maps.component.css'] }) export class MapsComponent implements OnInit { public shapeData: object; public dataSource: object; public shapeSettings: object; constructor() { } ngOnInit() { this.shapeData = world_Map; this.dataSource = colorMapping; this.shapeSettings = { colorValuePath: 'color', }; } } Legend After defining the LegendService in providers, you can access the legend functionality from the maps. To enable legends in maps, set the visible property in legends to true. <ejs-maps id='container' style="display:block;" [legendSettings] ='legendSettings'> <e-layers> <e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'> </e-layer> </e-layers> </ejs-maps> export class MapsComponent implements OnInit { public shapeData: object; public dataSource: object; public shapeSettings: object; public legendSettings: object; ngOnInit() { this.shapeData = world_Map; this.dataSource = colorMapping; this.shapeSettings = { colorValuePath: 'color', }; this.legendSettings = { visible: true }; } } Marker After defining the MarkerService in providers, you can access the marker functionality from the maps. To enable markers in maps, set the visible property in markers to true. <ejs-maps id='container' style="display:block;" > <e-layers> <e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'> <e-markerSettings > <e-markerSetting visible= true [dataSource] ='markerdataSource' height= 20 width= 20 ></e-markerSetting> </e-markerSettings> </e-layer> </e-layers> </ejs-maps> export class MapsComponent implements OnInit { public shapeData: object; public dataSource: object; public shapeSettings: object; public markerdataSource: object[]; ngOnInit() { this.shapeData = world_Map; this.dataSource = colorMapping; this.shapeSettings = { colorValuePath: 'color', }; this.markerdataSource = [ { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' }, { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' }, { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }, { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' }, { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' }, { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' }, { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' }, { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' }, { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' }, { latitude: 51.5326602, longitude: -0.1262422, name: 'London' } ]; } } Tooltip After defining the MapsTooltipService in providers, you can access the marker with tooltip functionality from maps. To enable tooltip in maps, set the visible property in tooltips to true. <ejs-maps id='container' style="display:block;" > <e-layers> <e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'> <e-markerSettings > <e-markerSetting visible= true [dataSource] ='markerdataSource' height= 20 width= 20 [tooltipSetting] =' tooltipSetting '></e-markerSetting > </e-markerSettings> </e-layer> </e-layers> </ejs-maps> export class MapsComponent implements OnInit { public shapeData: object; public dataSource: object; public shapeSettings: object; public markerdataSource: object[]; public tooltipSettings: object; ngOnInit() { this.shapeData = world_Map; this.dataSource = colorMapping; this.shapeSettings = { colorValuePath: 'color', }; this.tooltipSettings = { visible: true, valuePath: 'name' }; this.markerdataSource = [ { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' }, { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' }, { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }, { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' }, { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' }, { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' }, { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' }, { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' }, { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' }, { latitude: 51.5326602, longitude: -0.1262422, name: 'London' } ]; } }; Run the application with the “ng serve” command in command prompt to view the output of Angular 6 maps. You can explore the Angular 6 maps with more options and you can also try playing with the downloadable example link in this knowledge base article. Github source link: https://github.com/SyncfusionExamples/ej2-maps-angular-getting-started Stackblitz sample link: https://stackblitz.com/edit/angular-5gga9u?file=src%2Fapp%2Fmaps.component.ts
A quick start project that helps you create an Angular 6 circulargauge with minimal code configuration. Circular-gauge features covered in this project This Angular 6 circular gauge project is created using Angular CLI 1.7.4. The circular gauge features listed in this project are as follows. Axis for circular gauge. Range for circular gauge. Pointer for circular gauge. Project pre-requisites Make sure that you have the following compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 6+ TypeScript 2.6+ Angular 6 CircularGauge – Introduction The Angular 6 circular gauge used in this project is created from the Syncfusion ‘ej2-angular-circulargauge’ package. You can simply define circular gauge as < ejs-circulargauge > within the template. Dependencies Before starting with this project, you need to add the Syncfusion `ej2-angular-circulargauge` package to the Angular 6 circular gauge from npmjs, which is 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 @angular/cli@1.7.4 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 circulargauge component After the Angular application has been created, use the following command to install the circular gauge package. cd my-app npm install @syncfusion/ej2-angular-circulargauge –save The –save flag saves the circular gauge package as a dependency in the package.json file. All configuration related to environment setup has now been completed. Before configuring the circular gauge, a component is needed to render the circular gauge. To create an Angular component, use the following Angular CLI command. ng generate component circulargauge Now, import the circular gauge module in the app.module.ts file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CirculargaugeComponent } from './circulargauge/circulargauge.component'; import {CircularGaugeModule} from '@syncfusion/ej2-angular-circulargauge'; @NgModule({ declarations: [ AppComponent, CirculargaugeComponent ], imports: [ BrowserModule, AppRoutingModule, CircularGaugeModule ], providers: [CircularGaugeModule, AnnotationsService], bootstrap: [AppComponent] }) export class AppModule { } Creating the circular gauge component All the configurations related to the circular gauge has now been completed. Now, you need to define the first circular gauge in the circulargauge.component.html file. <ejs-circulargauge></ejs-circulargauge> Then, add the circular gauge component in the app.component.html file. < app-circulargauge ></ app-circulargauge > Go to the application directory, and launch the server by using following command. ng serve-open After all the files have been compiled successfully, the basic circular gauge will look like the following screenshot. Injecting modules Now, in the basic circular gauge, some features have been modularized and they 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 the circular gauge with annotation, define the providers of the app.module.ts file. This service provides access to the annotation functionality. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CirculargaugeComponent } from './circulargauge/circulargauge.component'; import {CircularGaugeModule, AnnotationsService} from '@syncfusion/ej2-angular-circulargauge'; @NgModule({ declarations: [ AppComponent, CirculargaugeComponent ], imports: [ BrowserModule, AppRoutingModule, CircularGaugeModule ], providers: [CircularGaugeModule, AnnotationsService], bootstrap: [AppComponent] }) export class AppModule { } The following code sample demonstrates how to render the circular gauge. <ejs-circulargauge style='display:block;' id='range-container' #range=''> <e-axes> <e-axis minimum=0 radius='80%' maximum=120 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks' > <e-ranges> <e-range start=0 end=40 color='#30B32D'></e-range> <e-range start=40 end=80 color='#FFDD00'></e-range> <e-range start=80 end=120 color='#F03E3E'></e-range> </e-ranges> <e-pointers> <e-pointer value=65 radius='60%' color='#757575' pointer Width=8 [needleTail]='tail' [cap]="pointerCap"> </e-pointer> </e-pointers> </e-axis> </e-axes> </ejs-circulargauge> import { Component, OnInit, ViewChild } from '@angular/core'; import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angular-circulargauge'; @Component({ selector: 'app-circulargauge', templateUrl: './circulargauge.component.html', styleUrls: ['./circulargauge.component.css'] }) export class CirculargaugeComponent implements OnInit { @ViewChild('range') public circulargauge: CircularGaugeComponent; public lineStyle: object; public labelStyle: object; public majorTicks: object; public minorTicks: object; public tail: object; public pointerCap: object; constructor() { } ngOnInit() { this.lineStyle = { width: 10, color: 'transparent' }; // Initializing LabelStyle this.labelStyle = { position: 'Inside', useRangeColor: false, font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' } }; this.majorTicks = { height: 10, offset: 5, color: '#9E9E9E' }; this.minorTicks = { height: 0 }; this.tail = { length: '18%', color: '#757575' }; this.pointerCap = { radius: 7, color: '#757575' }; } } Annotation After defining the AnnotationService in providers, you can access the annotation functionality from the circular gauge. <ejs-circulargauge style='display:block;' id='range-container' #range=''> <e-axes> <e-axis minimum=0 radius='80%' maximum=120 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' [annotations]='annotaions' [lineStyle]='lineStyle' [minorTicks]='minorTicks' > <e-ranges> <e-range start=0 end=40 color='#30B32D'></e-range> <e-range start=40 end=80 color='#FFDD00'></e-range> <e-range start=80 end=120 color='#F03E3E'></e-range> </e-ranges> <e-pointers> <e-pointer value=65 radius='60%' color='#757575' pointer Width=8 [needleTail]='tail' [cap]="pointerCap"> </e-pointer> </e-pointers> </e-axis> </e-axes> </ejs-circulargauge> import { Component, OnInit, ViewChild } from '@angular/core'; import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angular-circulargauge'; @Component({ selector: 'app-circulargauge', templateUrl: './circulargauge.component.html', styleUrls: ['./circulargauge.component.css'] }) export class CirculargaugeComponent implements OnInit { @ViewChild('range') public circulargauge: CircularGaugeComponent; public lineStyle: object; public labelStyle: object; public majorTicks: object; public minorTicks: object; public tail: object; public pointerCap: object; public annotaions: object; constructor() { } ngOnInit() { this.lineStyle = { width: 10, color: 'transparent' }; // Initializing LabelStyle this.labelStyle = { position: 'Inside', useRangeColor: false, font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' } }; this.majorTicks = { height: 10, offset: 5, color: '#9E9E9E' }; this.minorTicks = { height: 0 }; this.tail = { length: '18%', color: '#757575' }; this.pointerCap = { radius: 7, color: '#757575' }; this.annotaions = [{ content: '<div><span style="font-size:14px; color:#9E9E9E; font-family:Regular">Speedometer</span></div>', radius: '30%', angle: 0, zIndex: '1' }, { content: '<div><span style="font-size:24px; color:#424242; font-family:Regular">65 MPH</span></div>', radius: '40%', angle: 180, zIndex: '1' }]; } } Run the application with the “ng serve” command in command prompt to view the output of the Angular 6 circular gauge. You can explore the Angular 6 circulargauge with more options and you can also try playing with the downloadable example link in this knowledge base article. Github source link: https://github.com/SyncfusionExamples/ej2-circular-gauge-angular-getting-started Stackblitz sample link: https://stackblitz.com/edit/angular-1sc3v6?file=src%2Fapp%2Fcirculargauge.component.ts
A quick start project that helps you to create an Angular 6 MultiSelect Dropdown with a minimal code configuration. Angular 6 MultiSelect The following section explains the steps required to create a simple Angular 6 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 6+ Angular CLI TypeScript 2.6+ Visual studio code for editor Introduction The Angular 6 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 6 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 @angular/cli@6.2.7 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 6 MultiSelect Dropdown You can add the Angular 6 MultiSelect Dropdown component by using the `ejs-multiselect` directive. The attributes used within this tag allows you to define other MultiSelect Dropdown functionalities. To add the Angular 6 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. Screenshot There are more options to explore with Angular 6 MultiSelect Dropdown and you can also try to play with the downloadable example link in this knowledge base article. Downloadable example link: Angular 6 MultiSelect Dropdown
A quick start project that helps you to create an Angular 6 DatePicker component with a minimal code configuration. Angular 6 DatePicker The following section explains the steps required to create a simple Angular 6 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 6+ Angular CLI TypeScript 2.6+ Visual studio code for editor Introduction The Angular 6 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 6 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 6 using following command. npm install @angular/cli@6.0.3 -g 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 6 DatePicker You can add the Angular 6 DatePicker component by using ejs-datepicker directive and the attributes within the tag allows you to define other functionalities.ssss 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 { AppCompnent } 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. Also, you can download and run the sample from this GitHub Repository. For more information about DatePicker functionalities, refer UG Documentation, API Reference and Samples section.
A quick start project that helps you to create an Angular 6 DateRangePicker component with a minimal code configuration. Angular 6 DateRangePicker The following section explains the steps required to create a simple Angular 6 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 6+ Angular CLI TypeScript 2.6+ Visual studio code for editor Introduction The Angular 6 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 6 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 6 using following command. npm install @angular/cli@6.0.3 -g 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 6 DateRangePicker You can add the Angular 6 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 { AppCompnent } from './app.component'; @NgModule({ imports: [ BrowserModule, DateRangePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) exports 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 Also, you can download and run the sample from this GitHub Repository. For more information about DateRangePicker functionalities, refer to UG Documentation, API Reference and Samples.
The Essential JS 2 Angular Pivot Table component organizes and summarizes business data and displays the result in a cross-table format. A high volume of pivot data can be loaded without any performance degradation using the row and column virtualization. In this knowledge base, details about how to easily integrate Syncfusion Angular Pivot Table in the Angular 6 application and enable its commonly used features using services has been provided. The various features that are available in the Angular Pivot Table are databinding, sorting, filtering, exporting, aggregating, and grouping of pivot data with drill-down capability. Prerequisites The following list is required to create an Angular Pivot Table in the Angular 6 application: Node.js (latest version) Angular 6 Angular CLI Visual studio code for editor. Installation and application creation Install an Angular cli 6 using the following command.npm install -g @angular/cli@6.1.1 Create an Angular 6 application using the Angular cli.ng new angular6-app cd angular6-app Serve the Angular 6 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 Pivot Table After running the Angular 6 application successfully, configure the Angular Pivot Table in this application. Install the Angular Pivot Table and EJ2 package using the following command.npm install @syncfusion/ej2-angular-pivotview --save npm install @syncfusion/ej2 save The --save command will instruct the NPM to include a Pivot View package inside the dependencies section of the package.json. Import the PivotViewModule from the installed package in the app/app.module.ts and declare the PivotViewModule in imports array type and the meta data property of @NgModule in app/app.module.ts. import { NgModule } from '@angular/core'; import { PivotViewModule } from '@syncfusion/ej2-angular-pivotview'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PivotViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } You should refer to the CSS file for Angular Pivot Table in style.CSS. @import "../node_modules/@syncfusion/ej2/material.css"; Add the Angular Pivot Table component to the app.component.html.<ejs-pivotview></ejs-pivotview> Bind the JOSN data to the data property of datasource in the Pivot Grid component, this section explains how to bind remote data using the DataManager and WebApiAdaptor.Note:You can bind the local JSON data directly to the data property of the data source in the Pivot Table. Bind the string type fields either in rows or columns and bind the value field in value axis. The filter axis allows you to filter the values from the bounded data in the pivot table: name: Allows you set the field name from the bound data source. caption: Allows you set the field caption, which is the alias name displayed in the pivot grid. type: Allows you set the summary type of the field, and this property is applicable only for the value axis. import { Component, OnInit } from '@angular/core'; import { IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview'; import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { public data: DataManager; public dataSource: IDataOptions; public width: string; ngOnInit() { this.data = new DataManager({ url: 'https://bi.syncfusion.com/northwindservice/api/orders', adaptor: new WebApiAdaptor, crossDomain: true }); this.dataSource = { data: this.data, expandAll: false, rows: [{ name: 'ProductName', caption: 'Product Name' }], columns: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }], formatSettings: [{ name: 'UnitPrice', format: 'C0' }], values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }], filters: [] }; this.width = '800'; } } After defining the datasource, assign it to the Pivot Table’s dataSource attribute in app.component.html.<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width></ejs-pivotview> Now, serve the application using the following command. ng serve --open After all the files are compiled successfully, it will serve at the following site localhost:4200. The following screenshot illustrates this. Enabling features This section describes how to inject the pivot table services and enable its features. Before enabling the Pivot Table features, inject their services in app.module.ts and define the services in the providers meta data property of the NgModule. Grouping bar Define the GroupingBarService in the providers meta data property of NgModule in the app.module. Now, you can access the GroupingBar functionality from the pivot table. import { GroupingBarService } from '@syncfusion/ej2-angular-pivotview'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PivotViewModule ], providers: [ GroupingBarService ], bootstrap: [AppComponent] }) export class AppModule { } To enable the GroupingBar in the Pivot Table, set the showGroupingBar property to true. <ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height showGroupingBar='true'></ejs-pivotview> Field list The Pivot Grid provides a built-in Field List like Microsoft Excel. It allows you add or remove fields and rearrange them between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime. Define the FieldListService in the providers meta data property of NgModule in the app.module. Now, you can access the FieldList functionality from the Pivot Table. import { GroupingBarService, FieldListService, } from '@syncfusion/ej2-angular-pivotview'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PivotViewModule ], providers: [GroupingBarService, FieldListService,], bootstrap: [AppComponent] }) export class AppModule { } To display the field list icon in the Pivot Grid UI, you should set the showFieldList property to true. To display the field list dialog, click the field list icon at the top-left corner of the Pivot Grid. The field list icon will be displayed at the top-right corner of the Pivot Grid, when the grouping bar is enabled. <ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height showGroupingBar='true' showFieldList='true'></ejs-pivotview> Calculated field Define the CalculatedFieldService in the providers meta data property of the NgModule in the app.module.ts. You can use the calculated field feature in the Pivot Table. import { GroupingBarService, FieldListService, CalculatedFieldService } from '@syncfusion/ej2-angular-pivotview'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PivotViewModule ], providers: [ GroupingBarService, FieldListService, CalculatedFieldService ], bootstrap: [AppComponent] }) export class AppModule { } To enable the Calculated Field, you should set the allowCalculatedField property to true. <ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height showGroupingBar='true' showFieldList='true' allowCalculatedField='true'></ejs-pivotview> Exporting The Excel export allows the Pivot Grid data to export as Excel document. To enable Excel export in the Pivot Grid, set the allowExcelExport property to true in the app.component.html. You should use the excelExport method for Excel exporting in app.component.ts. <ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height allowExcelExport='true' ></ejs-pivotview><div class=”col-md-2”><button ej-button id= ‘export’ >Export</button></div> Conditional formatting The conditional formatting allows you change the appearance of Pivot Grid value cells with its background color, font color, font family, and font size based on specific conditions. To achieve this, set the allowConditionalFormatting to true in app.component.html and declare the ConditionalFormattingService in the app.module.ts. import { ConditionalFormattingService } from '@syncfusion/ej2-angular-pivotview'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, PivotViewModule ], providers: [ CondionalFormattingService ], bootstrap: [AppComponent] }) export class AppModule { } Use the conditionalFormatSettings object in the Pivot Grid component along with the following properties. <ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height allowConditionalFormatting='true' ></ejs-pivotview> this.dataSource = { data: this.data, expandAll: false, rows: [{ name: 'ProductName', caption: 'Product Name' }], columns: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }], formatSettings: [{ name: 'UnitPrice', format: 'C4', currency: 'EUR' }], values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }], filters: [], conditionalFormatSettings: [ { value1: 30, value2: 50, conditions: 'Between', style: { backgroundColor: '#80cbc4', color: 'black', fontFamily: 'Tahoma', fontSize: '12px' } } , { value1: 20, value2: 25, conditions: 'Between', style: { backgroundColor: '#f48fb1', color: 'black', fontFamily: 'Tahoma', fontSize: '12px' } } ] }; this.width = '800'; } Number formatting Number formatting allows you change the format of value cells, like currency, decimal digits to be displayed in the value cell. You can enable the number format settings in the the pivot grid data source by declaring the formatSettings along with the following properties. name: Specifies the value field name for which the number format will be applied. format: Sets the number of digits to be displayed after the decimal point (e.g. C0, C1). currency: Sets the currency code of the value cell (e.g. USD, EUR). this.dataSource = { data: this.data, expandAll: false, rows: [{ name: 'ProductName', caption: 'Product Name' }], columns: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }], formatSettings: [{ name: 'UnitPrice', format: 'C2', currency: 'EUR' }], values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }], filters: [], }; this.width = '800'; } Summary In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check the Angular Pivot Grid features from this page. If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Angular 6 TreeView component allows you to represent hierarchical data in a tree structure. It has great performance combined with advanced features like load on demand, checkbox support, multiple selection, tree navigation, drag and drop, tree node editing, and template support. This section explains how to get with Syncfusion Angular 6 TreeView component. Project pre-requisites Make sure that you have the following compatible version of TypeScript and Angular in your machine before starting to work on this project. Angular 6+ Typescript 2.9+ Angular 6 TreeView Introduction The Angular 6 TreeView used in this project is created from the Syncfusion `ej2-angular-navigations` package. You can simply define it as <ejs-treeview> within the template. Getting Started You can get started with the treeview component in Angular 6 platform using the following simple steps. Create a basic Angular application using angular-cli. If you do not have the CLI tool already, install it globally using the following command.npm install @angular/cli@6.1.0 Create an Angular application using the following command.ng new treeview-app This command will create the application and download its dependencies. After the application has been created, install the packages for treeview component into your application using the following command.cd treeview-app npm install @syncfusion/ej2-angular-navigations --save Now, the environment-related configurations have been completed. Next, integrate your Angular 6 TreeView component into the application. To import the treeview component in the app.module.ts, include it in the declarations. app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations'; @NgModule({ declarations: [ AppComponent, HomeComponent, TreeViewComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Essential JS 2 components support a set of built-in-themes, and here the material theme for the treeview is used. To add the material theme in your application, import the material.css files in style.css. style.css @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css' To initialize the treeview component in home/home.component.html file, use the following codes. home.component.html <ejs-treeview id="myTree" [fields]="treeFields" ></ejs-treeview> Then bind the data in home/home.component.ts file. home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { public treeData: Object[] = [ { nodeId: '1', nodeText: 'Documents', nodeChild: [ { nodeId: '11', nodeText: 'Team management.docx' }, { nodeId: '12', nodeText: 'Entity Framework Core.pdf' }, ] }, { nodeId: '2', nodeText: 'Downloads', nodeChild: [ { nodeId: '21', nodeText: 'Sales report.ppt' }, { nodeId: '22', nodeText: 'Introduction to Angular.pdf' }, { nodeId: '23', nodeText: 'Paint.exe' }, { nodeId: '24', nodeText: 'TypeScript sample.zip' }, ] }, { nodeId: '3', nodeText: 'Music', nodeChild: [ { nodeId: '31', nodeText: 'Crazy tone.mp3' } ] }, { nodeId: '4', nodeText: 'Videos', nodeChild: [ { nodeId: '41', nodeText: 'Angular tutorials.mp4' }, { nodeId: '42', nodeText: 'Basics of Programming.mp4' }, ] } ]; public treeFields: Object = { dataSource: this.treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild' }; constructor() { } ngOnInit() { } } After the data binding has been done, you can use the following command to see the output in a browser. ng serve --open Check boxes TreeView has a built-in option for check boxes that allows users to select more than one item. You can enable check boxes by setting the showCheckBox property in home.component.html file. <ejs-treeview id="default" showCheckBox='true' [fields]='treeFields'></ejs-treeview> Node Editing The node editing is also an often-used feature that allows users to rename the tree nodes dynamically through UI interaction. You can enable the node editing option by setting the allowEditing property. <ejs-treeview id="default" [fields]='treeFields' allowEditing="true"></ejs-treeview> Drag and drop Another important feature for treeview is node drag and drop. This allows users to reorder the nodes through UI interaction. You can enable the drag-and-drop option by setting the allowDragAndDrop property. <ejs-treeview id="default" [fields]='treeFields' allowDragAndDrop="true"></ejs-treeview> Also, you can download and run the sample from this GitHub Repository. For more information about TreeView functionalities, refer below help documents and samples. UG Documentation: https://ej2.syncfusion.com/angular/documentation/treeview/getting-started/ Samples: https://ej2.syncfusion.com/angular/demos/#/material/treeview/default ConclusionI hope you enjoyed learning about how to get started with Syncfusion Angular 6 TreeView component.You can refer to our Angular TreeView 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 TreeView 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 Data Grid/DataTable is used to display data from JSON or web service in a tabular format. Its feature set includes functionalities like data binding with adaptors, editing, filtering, sorting, grouping, paging, freezing rows and columns, 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 Data Grid in Angular 6 application and how to enable its commonly used features using services. Prerequisites Before start, we need following items to create Angular Data Grid in Angular 6 application Node.js (latest version) Angular 6 Angular CLI Visual studio code for editor. Installation and application creation Install Angular cli 6 using following command.npm install -g @angular/cli@6.1.1 Create an Angular 6 application using Angular cli.ng new angular6-app cd angular6-app Serve the Angular 6 application using following commandng serve Listen the application in localhost:4200 . Your application will serve in browser as follows. Integration of Angular Data Grid After running the Angular 6 application successfully, configure the Angular DataGrid in this application. Install Angular Data Grid and EJ2 package using 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 GridModule from installed package in app/app.module.ts.import { NgModule } from '@angular/core'; import { GridModule } from '@syncfusion/ej2-angular-grids'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GridModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } You should refer the CSS file for Angular Data Grid in style.CSS@import "../node_modules/@syncfusion/ej2/material.css"; Add the Angular Data Grid component in app.component.html.<ejs-grid></ejs-grid> Now, define the row data for this DataGrid in app.component.ts. Here, the JSON data is used for the Grid.export class AppComponent implements OnInit { public data: Object[]; ngOnInit() { this.data = [ { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France' }, { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: ' Germany' }, { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil' }, { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France' }, { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, ShipCountry: 'Belgium' }, { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, ShipCountry: 'Brazil' }, { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, ShipCountry: 'Switzerland' }, { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, ShipCountry: 'Switzerland' }, { OrderID: 10256, CustomerID: 'SUPRD', Freight: 13.97, ShipCountry: 'Brazil' }, { OrderID: 10257, CustomerID: 'WELLI', Freight: 14.23, ShipCountry: 'Venezuela' }, { OrderID: 10258, CustomerID: 'VICTE', Freight: 18.33, ShipCountry: 'France' }, { OrderID: 10259, CustomerID: 'WELLI', Freight: 28.13, ShipCountry: 'Brazil' }, { OrderID: 10260, CustomerID: 'CHOPS', Freight: 48.34, ShipCountry: 'Switzerland' }, { OrderID: 10261, CustomerID: 'SUPRD', Freight: 32.73, ShipCountry: ' Germany' }, { OrderID: 10262, CustomerID: 'TOMSP', Freight: 12.31, ShipCountry: 'Switzerland' }, { OrderID: 10263, CustomerID: 'VICTE', Freight: 23.77, ShipCountry: 'Brazil' }, { OrderID: 10264, CustomerID: 'SUPRD', Freight: 43.47, ShipCountry: 'Venezuela' }, { OrderID: 10265, CustomerID: 'CHOPS', Freight: 53.37, ShipCountry: 'Belgium' }, ]; } } After defining row data, define Data Grid’s dataSource and columns in app.component.html. In Columns, the textAlign to customize the alignment of columns, Width is to define the column width in pixels and format is defined to customize the cell value to Number and Date options by I18n standard.<ejs-grid [dataSource]='data'> <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> 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 Data Grid in Angular 6 Application. This section describes how to inject data grid services and enable its features. Before enable data grid 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, GroupService], bootstrap: [AppComponent] }) export class AppModule { } Paging After defining the PageService in providers. Now we can access Paging functionality from Data Grid. To enable pager in Data Grid, set the allowPaging property to true. <ejs-grid [dataSource]='data' [allowPaging]='true'> <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> Sorting After SortService is defined in providers. You can inherit sorting behaviors. This can be used in Data Grid by settingallowSorting property as true. <ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true'> <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> Filtering By declaring FilterService in app.module.ts. You can use filtering functionalities in Data Grid. In this Angular 6 Data Grid,enable Filter menu to filter data grid 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> @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 = [ { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France' }, { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: ' Germany' }, { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil' }, { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France' }, { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, ShipCountry: 'Belgium' }, { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, ShipCountry: 'Brazil' }, { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, ShipCountry: 'Switzerland' }, { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, ShipCountry: 'Switzerland' }, { OrderID: 10256, CustomerID: 'SUPRD', Freight: 13.97, ShipCountry: 'Brazil' }, { OrderID: 10257, CustomerID: 'WELLI', Freight: 14.23, ShipCountry: 'Venezuela' }, { OrderID: 10258, CustomerID: 'VICTE', Freight: 18.33, ShipCountry: 'France' }, { OrderID: 10259, CustomerID: 'WELLI', Freight: 28.13, ShipCountry: 'Brazil' }, { OrderID: 10260, CustomerID: 'CHOPS', Freight: 48.34, ShipCountry: 'Switzerland' }, { OrderID: 10261, CustomerID: 'SUPRD', Freight: 32.73, ShipCountry: ' Germany' }, { OrderID: 10262, CustomerID: 'TOMSP', Freight: 12.31, ShipCountry: 'Switzerland' }, { OrderID: 10263, CustomerID: 'VICTE', Freight: 23.77, ShipCountry: 'Brazil' }, { OrderID: 10264, CustomerID: 'SUPRD', Freight: 43.47, ShipCountry: 'Venezuela' }, { OrderID: 10265, CustomerID: 'CHOPS', Freight: 53.37, ShipCountry: 'Belgium' }, ]; } } After defining filter menu. Filter UI will be obtained as follows. Grouping If GroupService is injected in providers then enable allowGrouping in the grid to access its functionalities. <ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [allowGrouping]='true' > <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> 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 Data Grid features from this page. ConclusionI hope you enjoyed learning on how I can quickly get started with a Syncfusion Angular 6 DataGrid/datatable example.You can refer to our Angular DataGrid 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 DataGrid 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 6 Rich Text Editor with a minimal code configuration. Angular 6 Rich Text Editor The following section explains the steps required to create a simple Angular 6 Rich Text Editor component. 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.Nodejs(latest version)Angular 6+Angular CLITypeScript 2.6+Visual studio code for editor Angular 6 Rich Text Editor – Introduction The Angular 6 Rich Text Editor used in this project is created from the Syncfusion `ej2-angular-richtexteditor` package. You can simply define it as <ejs-richtexteditor> within the template. Dependencies Before starting with this project, the Angular 6 Rich Text Editor requires to add the Syncfusion `ej2-angular-richtexteditor` 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 @angular/cli@6.2.7 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-richtexteditor package through the npm install command.npm install @syncfusion/ej2-angular-richtexteditor --save Adding Angular 6 RichTextEditor You can add the Angular 6 Rich Text Editor component by using the `ejs-richtexteditor` directive, and the attributes used within this tag allows you define other richtexteditor functionalities. To add the Angular 6 Rich Text Editor, follow the steps: Import the RichTextEditorAllModule into the app.module.ts file from the ej2-angular- richtexteditor 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 { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, RichTextEditorAllModule ], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular RichTextEditor code within the app.component.html file which is mapped against the templateUrl option in the app.component.ts file. [app.component.html] <ejs-richtexteditor></ejs-richtexteditor> 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 Rich Text Editor will be displayed on the browser. Now, you can load the Rich Text Editor with data. Screenshot Toolbar items configuration To enable the toolbar options in the Rich Text Editor, import the required module services from the ej2-angular-richtexteditor package. Then, mention it in the providers section within the app.component.ts file. By default, the Rich Text Editor does not display the toolbar. To change the toolbar, the `toolbarSettings` property can be used. [app.component.ts] import { Component } from '@angular/core'; import { ToolbarService, LinkService, ImageService, HtmlEditorService, TableService } from '@syncfusion/ej2-angular-richtexteditor'; @Component({ selector: 'app-container', template:`<ejs-richtexteditor id='iframeRTE' [(value)]='value' [toolbarSettings]='tools'></ejs-richtexteditor>`, providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, TableService] }) export class AppComponent { public tools: object = { items: [ 'Bold', 'Italic', 'Underline', 'StrikeThrough', '|', 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', '|', 'LowerCase', 'UpperCase', '|', 'Undo', 'Redo', '|', 'Formats', 'Alignments', '|', 'OrderedList', 'UnorderedList', '|', 'Indent', 'Outdent', '|', 'CreateLink','CreateTable', 'Image', '|', 'ClearFormat', 'Print', 'SourceCode', '|', 'FullScreen'] }; } [app.component.html] <ejs-richtexteditor #toolsRTE id='alltoolRTE' [toolbarSettings]='tools' > Screenshot Setting value on Rich Text Editor You can populate the empty Rich Text Editor with value by binding the string data to it 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 = ` <p>The RichTextEditor triggers events based on its actions. </p> <p> The events can be used as an extension point to perform custom operations.</p> } Now, assign this value to the `value` property of Angular Rich Text Editor within the app.component.html file. [app.component.html] <ejs-richtexteditor id='defaultRTE' [(value)]='value' ></ejs-richtexteditor> Screenshot Getting the value on form submit By using the ngModel, you can get the value from the ngform submit. [app.component.ts] import { Component,ViewChild } from '@angular/core'; import {NgForm} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { onSubmit(form: NgForm): void { alert(form.value.name); } } [app.component.html] <form #form='ngForm' (ngSubmit)="onSubmit(form)"> <div class="form-group"> <ejs-richtexteditor #fromRTE [(value)]='value' required name="name" [(ngModel)]="value" ></ejs-richtexteditor> <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 RichTextEditor output with data and other settings. Screenshot There are more options to explore with Angular 6 Rich Text Editor and you can also try to play with the downloadable example link in this knowledge base article.Downloadable example link: Angular 6 RichTextEditor ConclusionI hope you enjoyed learning about how to get started easily with Syncfusion Angular 6 Rich Text Editor.You can refer to our Angular Rich Text Editor 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 Rich Text Editor 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!
Introduction Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular components. The PDF Viewer component is developed from the ground up to be lightweight, responsive, modular and touch friendly. It is compatible with Angular 6.0.0. Refer to the following UG link for prerequisites of Angular framework. Setup Angular Environment You can use the Angular CLI to setup your Angular applications. To install Angular CLI use the following command. npm install -g @angular/cli Create an Angular Application Start a new Angular application using the Angular CLI command as follows. ng new my-app cd my-app Adding Syncfusion PDF Viewer package All the available Essential JS 2 packages are published in npmjs.com registry. To install PDF Viewer component, use the following command. npm install @syncfusion/ej2-angular-pdfviewer --save Note:The --save will instruct NPM to include the PDF Viewer package inside of the dependencies section of the package.json. Registering PDF Viewer module Import PDF Viewer module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-pdfviewer[src/app/app.module.ts]. TS import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // Imported syncfusion PdfViewer component from PdfViewer package import { PdfViewerComponent } from '@syncfusion/ej2-angular-pdfviewer'; @NgModule({ declarations: [ AppComponent, // Registering EJ2 PDF Viewer component PdfViewerComponent ], imports: [ BrowserModule, AppRoutingModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Adding CSS reference The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the following code. CSS @import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; @import '../node_modules/@syncfusion/ej2-base/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-lists/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-splitbuttons/styles/material.css'; Add PDF Viewer component Modify the template in [src/app/app.component.ts] file to render the PDF Viewer component. Add the Angular PDF Viewer by using <ejs-pdfviewer> selector in template section of the app.component.ts file. TS import { Component } from '@angular/core'; import { LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService } from '@syncfusion/ej2-angular-pdfviewer'; @Component({ selector: 'app-root', template: '<div> <ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer> </div>', // tslint:disable-next-line:max-line-length providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService] }) export class AppComponent { title = 'syncfusion- pdfviewer-angular-app'; // set the service url to PdfViewer control public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'; // default document to render in the PdfViewer control public document = 'PDF_Succinctly.pdf'; } Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app2054068837 UG link: https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started.html Essential JS 1 PDF Viewer PDF Viewer is compatible with Angular 6.0.0. Refer to the following UG link for prerequisites of Angular framework. https://help.syncfusion.com/angular/gettingstarted/overview The following code illustrates how to integrate PDF Viewer in Angular 6 application. HTML <ej-pdfviewer [(serviceUrl)]="service" id="pdfviewer1" style="width:100%;min-height:600px;display:block" > </ej-pdfviewer> TS import { Component } from '@angular/core'; @Component({ selector: 'ej-app', templateUrl: './pdfviewer.component.html', }) export class PdfViewerComponent { service: string; constructor() { this.service = 'https://js.syncfusion.com/ejServices/api/PdfViewer'; } } Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_Angular6869299007 UG link: https://help.syncfusion.com/angular/pdfviewer/getting-started
