The Essential JS2 Angular Badge component is used to provide alerts to users on new or unread messages, notifications, and additional information to the content. This KB article explains how to easily get started with EJ2 Badge component in the Angular 7 project with minimal code. Prerequisites Before starting, the following tools and SDK need to be installed in your machine: Node.js (v8.10.0 or above) Angular 7 Angular CLI Installation and application creation You can install Angular CLI 7 using the following command. npm install -g @angular/cli@7.0.5 If you need to follow and run the application in Angular 6 or earlier version, replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 7 application ng new badge-angular7 cd badge-angular7 Installing EJ2 Badge npm install @syncfusion/ej2-angular-notifications Serve the application ng serve --open Your application will open in a browser in the http://localhost:4200. Refer to following screenshot for Angular 7 version. Adding Angular 7 Badge Since the badge is a CSS component, you need to just import the required CSS styles files to the style.css file. Import the CSS styles of the Badge component. [style.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.css'; Add the Badge component in the template file. [app.component.html] <h1>API List type <span class="e-badge e-badge-danger">Deprecated</span></h1> Run the application using the command, and you can see the following represented output of the EJ2 Angular Badge component. ng serve --open Badge styles Badge has the following predefined styles that can be used with .e-badge class to change the appearance of a badge. e-badge-primary - Represents a primary notification. e-badge-secondary - Represents a secondary notification. e-badge-success - Represents a positive notification. e-badge-danger - Represents a negative notification. e-badge-warning - Represents notification with caution. e-badge-info - Represents an informative notification. e-badge-light - Represents notification in a light variant. e-badge-dark - Represents notification in a dark variant. [app.component.html] <h1>Badge type <span class="e-badge e-badge-primary">Primary</span></h1> <h1>Badge type <span class="e-badge e-badge-secondary">Secondary</span></h1> <h1>Badge type <span class="e-badge e-badge-success">Success</span></h1> Now, you can see the Badges when you run the application. Notifications The badge style can be applied to notification by adding the modifier class .e-badge-notification to the target element. Notification badges are used when content or a context needs special attention. When using the notification badge, set the parent element to position: relative. [app.component.html] <span style="position: relative;font-size: 22px;">Notification Count <span class="e-badge e-badge-primary e-badge-notification">99</span> </span> Now, you can see the changes like below when you run the application. Summary You can learn more about the Angular 7 Badge from the following links: GitHub repository of the code used in this article can be found here. Checkout Angular 7 Badge features. Checkout Angular 7 Badge documentation. 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 JS2 Angular Avatar component is used to display icons or figures that represent a person. The icons and figures are used in popular media formats such as images, SVG, font icons, and letters. This KB article explains how to easily get started with EJ2 Avatar component in Angular 7 project with minimal code. Prerequisites Before starting, the following tools and SDK need to be installed in your machine: Node.js (v8.10.0 or above) Angular 7 Angular CLI Installation and application creation You can install Angular CLI 7 using the following command. npm install -g @angular/cli@7.0.5 Note: If you need to follow and run the application in Angular 6 or earlier version, replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 7 application ng new avatar-angular7 cd avatar-angular7 Installing EJ2 Avatar npm install @syncfusion/ej2-angular-layouts Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 7 version. Adding Angular 7 Avatar Since avatar is a CSS component, you do not need to import a separate module, and only the CSS styles files need to be imported. You can add the “e-avatar” class to the element wrapping the “image” to instantly change it to Avatar. Import the CSS styles of the Avatar component. [style.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-layouts/styles/material.css'; Add the Avatar component in the template file. [app.component.html] <div class="e-avatar"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> Run the application using the following command and see the following represented output of the EJ2 Angular Avatar component. ng serve --open Sizes By default, Avatar supports the following five different sizes for specific situations: XLarge (e-avatar-xlarge) Large (e-avatar-xlarge) Normal (e-avatar) Small (e-avatar-small) XSmall (e-avatar-xsmall) [app.component.html] <div class="e-avatar e-avatar-xlarge"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-large"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-small"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-xsmall"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> Shapes Avatar supports two types of shapes to choose: rectangular and circle. By default, the rectangular shape is enabled, and the circle shape can be enabled by specifying the “e-avatar-circle” as demonstrated in the following code sample. [app.component.html] <div class="e-avatar e-avatar-xlarge e-avatar-circle"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-large e-avatar-circle"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-circle"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-small e-avatar-circle"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> <div class="e-avatar e-avatar-xsmall e-avatar-circle"> <img src="https://ej2.syncfusion.com/demos/src/avatar/images/pic01.png" /> </div> Summary You can learn more about the Angular 7 Avatar from the following links: GitHub repository of code used in this article can be found here. Checkout Angular 7 Avatar features. Checkout Angular 7 Avatar documentation. 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 7 Diagram with minimal code configuration. Diagram features covered in this project This is an Angular 7 project created using Angular CLI 7.0.4. The Diagram features included in this project are as follows: Simple flowchart Diagram provides all required flow shapes as readymade objects. You need to define the shapes and types to render the desired shapes in the diagram.Avoids overlapping of connectors over nodes using ports. Organizational chart This sample explains how to assign the dataSource externally and automatically position the populated nodes. Project prerequisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 7+ TypeScript 2.6+ Angular 7 Diagram – Introduction The Angular 7 Diagram used in this project is created from the Syncfusion® `ej2-angular-diagram` package. You can simply define it as <ejs-diagram> within the template. Dependencies Before starting with this project, the Angular 7 Diagram requires to add the Syncfusion® `ej2-diagram` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular project You can refer to the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application on your machine:npm install @angular/cli@7.0.4 Note: If you would like to follow and run the application in Angular 6, Angular 5, or Angular 4, replace the CLI command version number with the corresponding Angular version number: npm install -g @angular/cli@<CLI VERSION> Now, create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-diagram package using the npm install command.npm install @syncfusion/ej2-angular-diagrams –save Creating empty diagram You can add the Angular 7 Diagram component by using the `ej-diagram` directive, and the attributes used within this tag allow you to define other diagram functionalities. You have to import the DiagramModule into app.module.ts file from the package @syncfusion/ej2-angular-diagrams [src/app/app.module.ts] [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { DiagramModule } from '@syncfusion/ej2-angular-diagrams'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; /** * Module */ @NgModule({ imports: [ BrowserModule, DiagramModule ], declarations: [AppComponent], bootstrap: [AppComponent], providers: [ ], }) export class AppModule { } Define the diagram tag into app.component.html. In the following code example, set the ID, width, and height property of the diagram to create an empty diagram. [app.component.html] <ejs-diagram id="diagram" width="100%" height="580px"> </ejs-diagram> Then, you must include the diagram dependent stylesheets into [src/styles.css] file. Syncfusion® provides different types of themes style to the Diagram control and you can use this into your application based on your requirement. All the stylesheets are available under node_modules/@syncfusion/ej2-angular-diagrams folder. @import "../node_modules/@syncfusion/ej2-angular-diagrams/material.css"; Now, run the application by using ng serve command and open this link in your browser. You will see the empty diagram as follows. Creating flowchart with Syncfusion® Diagram control Using Syncfusion® Diagram control, you can create a flowchart with nodes and connectors like the following screenshot. Nodes are used to visualize any graphical object and it can be arranged and manipulated at the same time on a diagram page. Diagram provides all required flow shapes as readymade objects. You can just define the shape type and shape name to render the shapes in the diagram. Here is a sample code for adding nodes. [app.component.ts] public nodes: NodeModel[] = [ { //Define unique id for each shape id: 'Start', offsetY: 50, annotations: [{ content: 'Start' }], //Define the shape type and flow shape shape: { type: 'Flow', shape: 'Terminator' } }, { id: 'Init', offsetY: 150, annotations: [{ content: 'var i = 0;' }], shape: { type: 'Flow', shape: 'Process' } }, { id: 'Condition', offsetY: 250, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' }, }, { id: 'Print', offsetY: 350, annotations: [{ content: 'print(\'Hello!!\');' }], shape: { type: 'Flow', shape: 'PreDefinedProcess' } }, { id: 'Increment', offsetY: 450, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' }, }, { id: 'End', offsetY: 550, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' }, }, ]; Now, you have to map this “nodes” object to the diagram’s nodes property. [app.component.html] <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes”> </ejs-diagram> Connectors are used to represent a relationship between two nodes. Here is a sample code for adding connectors. [app.component.ts] public connectors: ConnectorModel[] = [ { //Define unique ID for connectors id: 'connector1', //SourceID and targetID property is used to define the relationship between shapes sourceID: 'Start', targetID: 'Init' }, { id: 'connector3', sourceID: 'Condition', targetID: 'Print', annotations: [{ content: 'Yes' }] }, { id: 'connector4', sourceID: 'Condition', targetID: 'End', annotations: [{ content: 'No' }] }, { id: 'connector5', sourceID: 'Print', targetID: 'Increment' }, { id: 'connector6', sourceID: 'Increment', targetID: 'Condition', } ]; Now, you have to map this “connectors” object to the diagram’s connectors property. [app.component.html] <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes” [connectors] = “connectors”> </ejs-diagram> From the above screenshot, you can see all the nodes have same width, height, and x position. So, instead of specifying these common settings to all the nodes, the “getNodeDefaults” property of the diagram is used to define these common settings to all the nodes. Define the common settings in the “getNodeDefaults” method. And then, you must map the method name to the diagram’s “getNodeDefaults” property. [app.component.html] <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes” [connectors] = “connectors” [getNodeDefaults] = “nodeDefaults”> </ejs-diagram> [app.component.ts] public nodeDefaults(obj: NodeModel) : NodeModel { let node: NodeModel = {}; node.height = 50; node.width = 140; node.offsetX = 300; return node; } Like “getNodeDefaults”, the “getConnectorDefaults” property is used to define the common settings for connector. Three types of connectors are supported in the diagram such as straight line, orthogonal line, and Bezier line. Here, orthogonal connector is used to create the flow diagram. The targetDecorator is used to indicate the flow direction. You can also define sourceDecorator based on your requirement. Now, you have to map the “getConnectorDefaults” object to the “getConnectorDefaults” property of the diagram. [app.component.html] <ejs-diagram id="diagram" width="100%" height="580px" [nodes] = “nodes” [connectors] = “connectors” [getNodeDefaults] = “nodeDefaults” [getConnectorDefaults] = “connDefaults”> </ejs-diagram> [app.component.ts] public connDefaults(obj: Connector) : void { obj.type = 'Orthogonal'; obj.targetDecorator = { shape: 'Arrow', width: 10, height: 10 }; } In the above screenshot, there are some connectors overlapped with the node. It can be avoided with the help of ports. Ports represent a specific point on a node to which connector can be connected. You can add multiple ports to the nodes. The offset property of port is used to align the port relative to the node boundaries. The x and y properties of the offset should be defined in the range of 0 to 1. For example, if you specify x = 0 and y = 0, then port will be positioned at top/left corner of the node. If you define (1, 1), then it will be positioned at bottom/right corner, and (0.5, 0.5) represents center of the node. The ports are added for the nodes, which are overlapped with the connectors. The connection has been established from port to port instead of node to node for “conditionNode” and “endNode” using the connector’s sourcePortID and targetPortID properties. Similarly, the connection has been established from port to port instead of node to node for “incrementalNode” and “conditionNode” Here is an example for avoiding overlapping of connectors. public nodes: NodeModel[] = [ { id: 'Condition', offsetY: 250, annotations: [{ content: 'i < 10?' }], shape: { type: 'Flow', shape: 'Decision' }, //Creation of ports ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }] }, { id: 'Increment', offsetY: 450, annotations: [{ content: 'i++;' }], shape: { type: 'Flow', shape: 'Process' }, ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }] }, { id: 'End', offsetY: 550, annotations: [{ content: 'End' }], shape: { type: 'Flow', shape: 'Terminator' }, ports: [{ offset: { x: 0, y: 0.5 }, id: "port1" }, { offset: { x: 1, y: 0.5 }, id: "port2" }] }, ] public connectors: ConnectorModel[] = [ //Establish port to port connection by specifying sourcePortID and targetPortID { id: 'connector4', sourceID: 'Condition', targetID: 'End', sourcePortID: 'port2', targetPortID: 'port2', annotations: [{ content: 'No' }] }, { id: 'connector6', sourceID: 'Increment', targetID: 'Condition', sourcePortID: 'port1', targetPortID: 'port1' } ]; The following screenshot avoids overlapping of connectors by means of ports. Here is the sample Sample: https://stackblitz.com/edit/gubzkm-h5bjgq?file=index.ts Creating organizational chart with Syncfusion® Diagram control An organizational chart is a Diagram that displays the structure of an organization and relationships between the users (Employees). Using Syncfusion® Diagram control, you can create an organization chart like the following screenshot. Define the employee information as JSON array and then configure the data into the diagram’s `dataSourceSettings` property. In Syncfusion® Diagram control, rectangle boxes shown in the screenshot represent nodes, lines represents connectors, and the text inside the rectangle box represents annotations. At each node creation, the dataSourceSettings `doBinding` method will be triggered. You can use this method to configure the employee information inside the node. From the screenshot, the rectangle boxes having same width and height and the lines having same line style. Use the “nodeDefaults” and “connectorDefaults” method available in the Diagram control to configure these common settings. [app.component.ts] public Data: any = [ { 'id': 'parent', 'role': 'Board', 'color': '#71AF17' }, { 'id': '1', 'role': 'General Manager', 'manager': 'parent', 'color': '#71AF17' }, { 'id': '2', 'role': 'Human Resource Manager', 'manager': '1', 'color': '#1859B7' }, { 'id': '3', 'role': 'Trainers', 'manager': '2', 'color': '#2E95D8' }, { 'id': '4', 'role': 'Recruiting Team', 'manager': '2', 'color': '#2E95D8' }, { 'id': '6', 'role': 'Design Manager', 'manager': '1', 'color': '#1859B7' }, { 'id': '7', 'role': 'Design Supervisor', 'manager': '6', 'color': '#2E95D8' }, { 'id': '8', 'role': 'Development Supervisor', 'manager': '6', 'color': '#2E95D8' }, { 'id': '10', 'role': 'Operations Manager', 'manager': '1', 'color': '#1859B7' }, { 'id': '11', 'role': 'Statistics Department', 'manager': '10', 'color': '#2E95D8' }, { 'id': '12', 'role': 'Logistics Department', 'manager': '10', 'color': '#2E95D8' }, { 'id': '16', 'role': 'Marketing Manager', 'manager': '1', 'color': '#1859B7' }, { 'id': '17', 'role': 'Overseas Sales Manager', 'manager': '16', 'color': '#2E95D8' }, { 'id': '20', 'role': 'Service Department Manager', 'manager': '16', 'color': '#2E95D8' } ]; public data: Object = { //Set the unique field from data source id: 'id', //Set the field, which is used to identify the reporting person parentId: 'manager', //Define the employee data dataManager: new DataManager(this.Data), doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => { //You will get the employee information in data argument and bind that value directly to node's built-in properties. nodeModel.annotations = [{ content: (data as any).role }]; nodeModel.style = { fill: (data as any).color }; } }; public layout: Object = { //Set the layout type type: 'OrganizationalChart' }; //Defines the default node and connector properties public nodeDefaults(obj: NodeModel) : NodeModel { obj.annotations[0].style.color = "white"; obj.width = 120; return obj; }; public connDefaults(connector: ConnectorModel, diagram: Diagram) : ConnectorModel { connector.type = 'Orthogonal'; connector.targetDecorator = { shape: 'None' }; return connector; } Now, you have to map the diagram’s layout, dataSourceSettings, node, and connector defaults property within the app.component.html file. [app.component.html] <ejs-diagram id="diagram" id="diagram" width="100%" height="700px " [layout]='layout' [dataSourceSettings]= 'data' [getNodeDefaults]= 'nodeDefaults' [getConnectorDefaults]= 'connDefaults' > </ejs-diagram> The following screenshot displays the organizational chart of the employees. Here is the sample Sample: https://stackblitz.com/edit/2vhtnp-t9hjdg?file=index.ts ConclusionI hope you enjoyed learning about how to get started easily with Syncfusion® Angular 7 Diagram.You can refer to our JavaScript Diagram 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 JavaScript Diagram 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 Linear Gauge is used to visually represent a value within a range of values. This value can vary dynamically during presentation and enabling animation effects. Its feature sets include features such as pointer, axes, ranges, and annotations. This KB article explains how to easily integrate Syncfusion Angular Linear Gauge in Angular 7 Application and how to enable its commonly used features using services. Prerequisites Before starting, you need the following items to create Angular Linear Gauge in Angular 7 application: Node.js (latest version) Angular Angular CLI Visual studio code for editor. Installation and application creation Install Angular CLI using the following command.npm install -g @angular/cli@7.0.5 Note:If you would like to follow and run the application in Angular 4 or Angular 5 or Angular 6, you need to replace the CLI command version number with corresponding Angular version number npm install -g @angular/cli@<CLI VERSION> Create an Angular7 application using Angular CLI.npm new angular7-app cd angular7-app Serve the Angular 7 using the following command.ng serve Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 7 version. Integration of Angular Linear Gauge After running the Angular 7 application successfully, configure the Angular Linear Gauge in this application. Install Angular Linear Gauge and EJ2 package using the following command. The –save command instructs the NPM to include the Linear Gauge package inside the dependencies section of the package.json. npm install @syncfusion/ej2-angular-lineargauge –save npm install @syncfusion/ej2 --save Import Lineargauge module from the installed package in app/app.module.ts.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { LinerGaugeModule } from '@syncfusion/ej2-angular-lineargauge; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, LinearGaugeModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Refer to the css file for Angular Linear Gauge in style.css. Import “../node_modules/@syncfusion/ej2/material.css” Add the Angular Linear Gauge component in app.component.html.<ejs-lineargauge></ejs-lineargauge> Now add the axes, major ticks, minor ticks, and pointer in app.component.ts. public Axes: Object[] = [{ pointers: [{ value: 10, height: 15, width: 15, placement: 'Near', offset: -50, markerType: 'Triangle' }], majorTicks: { color: '#9E9E9E', interval: 10 }, minorTicks: { color: '#9E9E9E', interval: 2 }, labelStyle: { offset: 48 } }]; After adding the properties, define the Linear Gauge properties in app.component.html.<ejs-lineargauge id='defaultContainer' style='display:block;' style='display:block;' orientation='Horizontal' [annotations]='Annotation' [axes]='Axes'> </ejs-lineargauge> Now, serve the application using the following command. ng serve –open After all the files have been compiled successfully, it will serve the site at localhost:4200 The following screenshot illustrates this. Summary To know more about the Linear gauge, check our Angular Linear Gauge 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 TreeMap is used to visualize self-referential hierarchical data effectively in a zoomable manner. The size of the boxes is calculated based on the umber of child components. Its feature set include functionalities such as data label, data binding, export to PDF, and SVG. This KB article explains how to easily integrate Syncfusion Angular TreeMap in an Angular 7 Application and how to enable its commonly used features using services. Prerequisites Before starting, you need the following items to create Angular TreeMap in an Angular 7 application: Node.js (latest version) Angular Angular CLI Visual studio code for editor Installation and application creation Install Angular CLI using the following command. npm install -g @angular/cli@7.0.5 Note:If you would like to follow and run the application in Angular 4 or Angular 5 or Angular 6 you need to replace the CLI command version number with corresponding angular version number npm install -g @angular/cli@<CLI VERSION> Create an Angular 7 application using Angular CLI. ng new angular7-app cd angular7-app Serve the Angular 7 using the following command. ng serve Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 7 version. Integration of Angular TreeMap After running the Angular 7 application successfully, configure the Angular TreeMap in this application. Install Angular TreeMap and EJ2 package using the following command. The –save command instructs the NPM to include the TreeMap package inside the dependencies section of the package.json. npm install @syncfusion/ej2-angular-treemap --save npm install @syncfusion/ej2 -- save Import TreeMapModule from installed package in app/app.module.ts.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { TreemapModule } from '@syncfusion/ej2-angular-treemap'; import { AppComponent } from './app.component'; @NgModule({ declarations: AppComponent ], imports: [ BrowserModule, TreeMapModule ], bootstrap: [AppComponent] }) export class AppModule { } Refer the CSS file for Angular TreeMap in style.css. Import “../node_modules/@syncfusion/ej2/material.css” Add the Angular TreeMap component in app.component.html. <ejs-treemap></ejs-treemap> Now, define the data source for this TreeMap in app.component.ts. Here, the JSON data is used for the TreeMap. export class AppComponent { title = 'treemap-app'; dataSource: object[] = CarSales; weightValuePath: string = 'Sales'; palette: string[] = ['#C33764', '#AB3566', '#993367', '#853169', '#742F6A', '#632D6C', '#532C6D', '#412A6F', '#312870', '#1D2671']; leafItemSettings: object = { labelPath: 'Company', border: { color: 'white', width: 0.5 } }; } After defining the dataSource, define data source of TreeMap in app.component.html. <ejs-treemap id='container' [dataSource] ='dataSource' [weightValuePath] ='weightValuePath' [palette] ='palette' [leafItemSettings] = 'leafItemSettings' format='n' useGroupingSeparator="true"> </ejs-treemap> Now, serve the application using the following command. ng-serve --open After all the files have been compiled successfully, it will serve the site at localhost:4200. The following screenshot illustrates this. Summary To know more about TreeMap, check our Angular TreeMap 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 Sparkline is used to present the general shape of variation in some measurement in a simple and highly condensed way. It is a very small line chart, typically drawn without axes or co-ordinates. Its type includes line, area, WinLoss, and column. This KB article explains how to easily integrate Syncfusion Angular Sparkline in an Angular 7 application and how to enable its commonly used features using services. Prerequisites Before starting, you need the following items to create Angular Sparkline in an Angular 7 Application: Node.js (latest version) Angular Angular CLI Visual studio code for editor Installation and application creation Install Angular CLI using the following command. npm install -g @angular/cli@7.0.5 Note:If you would like to follow and run the application in Angular 4 or Angular 5 or Angular 6, you need to replace the CLI command version number with corresponding Angular version number npm install -g @angular/cli@<CLI VERSION> Create an Angular 7 application using Angular CLI. npm new angular7-app cd angular7-app Serve the Angular 7 application using the following command. ng serve Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 7 version. Integration of Angular Sparkline Charts After running the Angular 7 application successfully, configure the Angular Sparkline Charts in this application. Install Angular Sparkline Charts and EJ2 package using the following command. The –save command instructs NPM to include the Sparkline Charts package inside the dependencies section of the package.json. npm install @syncfusion/ej2-angular-charts –save npm install @syncfusion/ej2 --save Import SparklinechartsModule from the installed package in app/app.module.ts. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { SparklineModule } from '@syncfusion/ej2-angular-charts; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SparklineModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Refer the CSS file for Angular Sparkline Charts in style.css. Import “../node_modules/@syncfusion/ej2/material.css” Add the Angular Sparkline component in app.component.html. <ejs-sparkline></ejs-sparkline> Now, add the data source for Sparkline Charts in app.component.ts. public pausData: object[] = [ { x: 0, xval: '2005', yval: 20090440 }, { x: 1, xval: '2006', yval: 20264080 }, { x: 2, xval: '2007', yval: 20434180 }, { x: 3, xval: '2008', yval: 21007310 }, { x: 4, xval: '2009', yval: 21262640 }, { x: 5, xval: '2010', yval: 21515750 }, { x: 6, xval: '2011', yval: 21766710 }, { x: 7, xval: '2012', yval: 22015580 }, { x: 8, xval: '2013', yval: 22262500 }, { x: 9, xval: '2014', yval: 22507620 }, ]; After adding the data source, define the Sparkline Charts in app.component.html. <ejs-sparkline id="paus" height="50px" width="150px" lineWidth=2 valueType="Category" fill="#3C78EF" negativePointColor="red" [dataSource]="pausData" xName="xval" yName="yval" format='n' useGroupingSeparator="true"> </ejs-sparkline> <ejs-sparkline id="aaus" height="50px" width="150px" lineWidth=2 v valueType="Category" fill="#3C78EF" type="Area" negativePointColor="red" [dataSource]="pausData" xName="xval" yName="yval"> </ejs-sparkline> <ejs-sparkline id="waus" height="50px" width="150px" lineWidth=2 valueType="Category" fill="#3C78EF" type="WinLoss" negativePointColor="red" [dataSource]="pausData" xName="xval" yName="yval"> </ejs-sparkline> <ejs-sparkline id="caus" height="50px" width="150px" lineWidth=2 valueType="Category" fill="#3C78EF" type="Column" [axisSettings]="minAus" negativePointColor="red" [dataSource]="pausData" xName="xval" yName="yval"></ejs-sparkline> Now, serve the application using the following command. ng serve –open After all the files have been compiled successfully, it will serve the site at localhost:4200. The following screenshot illustrates Sparkline Charts. Summary To know more about Sparkline Charts, check our Angular Sparkline Charts 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 Smith Chart is a graphical tool used to solve transmission line problems. This KB article explains how to easily integrate Syncfusion Angular Smith Chart in an Angular 7 application and how to enable its commonly used features using services. Prerequisites Before starting, you need the following items to create Angular Smith Chart in an Angular 7 Application: Node.js (latest version) Angular Angular CLI Visual studio code for editor Installation and application creation Install Angular CLI using the following command. npm install -g @angular/cli@7.0.5 Note:If you would like to follow and run the application in Angular6 or Angular 5 or Angular 4, You need to replace the CLI command version number with corresponding Angular version number npm install -g @angular/cli@<CLI VERSION> Create an Angular 7 application using Angular CLI. npm new angular7-app cd angular7-app Serve the Angular7 application using the following command. ng serve Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 7 version. Figure: Default Angular App Integration of Angular Smith Chart After running the Angular 7 application successfully, configure the Angular charts in this application. Install Angular charts and EJ2 package using the following command. The –save command instructs the NPM to include the Smith Chart package inside the dependencies section of the package.json. npm install @syncfusion/ej2-angular-charts –save npm install @syncfusion/ej2 --save Import SmithchartModule from installed package in app/app.module.ts. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {SmithChartModule } from '@syncfusion/ej2-angular-charts; import { AppComponent } from './app.component'; @NgModule ({ declarations: [ AppComponent ], imports: [ BrowserModule, SmithchartModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Refer the CSS file for Angular Smith Chart in style.css. Import “../node_modules/@syncfusion/ej2/material.css” Add the Angular Smith Chart component in app.component.html. <ejs-smithchart> </ejs-smithchart> Now, add the data source for this Smith Chart in app.component.ts. export class AppComponent { title = 'angularsmithchart-app'; public data: Object[] = [ { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 }, { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 }, { resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 }, { resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 }, { resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 }, { resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 } ]; public data1: Object[] = [ { resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 }, { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 }, { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 }, { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 }, { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 }, { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 }, { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 }, { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 } ]; } After adding the datasource, define the Smith Chart in app.component.html. <ejs-smithchart id='smithchartcontainer' > <e-seriesCollection> <e-series [points]='data' name='Transmission1' [enableAnimation] = true > </e-series> <e-series [points]='data1' name='Transmission2'[enableAnimation] =true> </e-series> </e-seriesCollection> </ejs-smithchart> Now, serve the application using the following command. ng serve –open After all the files have been compiled successfully, it will serve the site at localhost:4200. The following screenshot illustrates Smith Chart. Figure: Default Sample of Smith chart Summary To know more about the Smith Chart, check our Angular Smith Chart 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 7 circulargauge with minimal code configuration. Circular-gauge features covered in this project This Angular 7 circular gauge project is created using Angular CLI 7.0.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 7+ TypeScript 2.6+ Angular 7 CircularGauge – Introduction The Angular 7 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 7 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@7.0.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 7 circular gauge. You can explore the Angular 7 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
The Essential JavaScript Pivot Table control 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 7 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 7 application: Node.js (latest version) Angular 7 Angular CLI Visual studio code for editor. Installation and application creation Install an Angular cli 7 using the following command.npm install -g @angular/cli@7.0.5 Create an Angular 7 application using the Angular cli.ng new angular7-app cd angular7-app Serve the Angular 7 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 7 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 datasSource, 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'; } ConclusionI hope you enjoyed learning about how to get started easily with JavaScript Pivot Table.You can refer to our JavaScript Pivot Table 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 JavaScript Pivot Table 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 7 Scheduler with a minimal code configuration. Scheduler features covered in this Project This is an Angular 7 project created using Angular CLI 7.0.4. The Scheduler features included in this project are as follows. Angular 7 Scheduler displaying basic views with appointments loaded as JSON data. Drag and resize actions enabled for events by default. Setting current date and view for scheduler. Setting specific timezone on scheduler. Project pre-requisites Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project. Angular 7+ TypeScript 2.6+ Angular 7 Scheduler – Introduction The Angular 7 Scheduler used in this project is created from the Syncfusion `ej2-angular-schedule` package. You can simply define it as <ejs-schedule> within the template. Dependencies Before starting with this project, the Angular 7 Scheduler requires to add the Syncfusion `ej2-angular-schedule` package from npmjs, which are distributed in npm as @syncfusion scoped packages. Creating Angular Project We will see the Angular project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install @angular/cli@7.0.5 Note:If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with corresponding angular version number. npm install -g @angular/cli@<CLI VERSION> Now create a new Angular project by using the command `ng new` and navigate to that folder.ng new <project name> cd <project name> Install the ej2-angular-schedule package through the npm install command.npm install @syncfusion/ej2-angular-schedule --save Adding Angular 7 Scheduler You can add the Angular 7 Scheduler component by using `ejs-schedule` directive and the attributes used within this tag allows you to define other scheduler functionalities. Import the ScheduleModule into app.module.ts file from the ej2-angular-schedule package. The next step in Angular Scheduler creation is to import and inject the other required modules within the providers section of app.module.ts. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import {ScheduleModule, AgendaService, DayService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ScheduleModule ], providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService], bootstrap: [AppComponent] }) export class AppModule { } Define the Angular Scheduler code within the app.component.html file which is mapped against the templateUrl option in app.component.ts file. [app.component.html] <ejs-schedule> </ejs-schedule> Refer the CDN link of CSS reference within the index.html file. [index.html] <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" /> Try running the application with the command ng serve, and have an empty Scheduler displayed on the browser. Now, let’s load the Scheduler with event data. Loading appointment data Let’s populate the empty Scheduler with appointments, by binding the local JSON event data to it through the dataSource property. [app.component.ts] import { Component } from '@angular/core'; import { EventSettingsModel} from '@syncfusion/ej2-angular-schedule'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public eventData: EventSettingsModel = { dataSource: [{ Id: 1, Subject: 'Board Meeting', StartTime: new Date(2018, 10, 30, 9, 0), EndTime: new Date(2018, 10, 30, 11, 0) }, { Id: 2, Subject: 'Training session on JSP', StartTime: new Date(2018, 10, 30, 15, 0), EndTime: new Date(2018, 10, 30, 17, 0) }, { Id: 3, Subject: 'Sprint Planning with Team members', StartTime: new Date(2018, 10, 30, 9, 30), EndTime: new Date(2018, 10, 30, 11, 0) }] } } Now assign this data source to the Angular Scheduler’s eventSettings property within the app.component.html file. [app.component.html] <ejs-schedule [eventSettings]="eventData"></ejs-schedule> Enabling drag-and-resize options To enable the drag and resize actions on Scheduler events, import the required module services from the ej2-angular-schedule package and then mention it in the providers section within the app.module.ts file. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import {ScheduleModule, AgendaService, DayService, DragAndDropService, ResizeService, WeekService, WorkWeekService, MonthService } from '@syncfusion/ej2-angular-schedule'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, ScheduleModule ], providers: [AgendaService, DayService, WeekService, WorkWeekService, MonthService, DragAndDropService, ResizeService], bootstrap: [AppComponent] }) export class AppModule { } Setting current date and view By default, Scheduler displays the current system date in Week view mode. To change both the display date as well as view mode, selectedDate and currentView property can be used. [app.component.ts] import { Component } from '@angular/core'; import { EventSettingsModel, View } from '@syncfusion/ej2-angular-schedule'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public currentDate: Date = new Date(2018, 10, 30); public newViewMode: View = 'Month'; } [app.component.html] <ejs-schedule [eventSettings]="eventData" [selectedDate]="currentDate" [currentView]="newViewMode"></ejs-schedule> Setting timezone To set specific timezone for Angular Scheduler, timezone property can be defined with valid timezone value. Here, let’s assign “UTC” to the timezone property of Scheduler, so that the events will get displayed on Scheduler with UTC time difference. <ejs-schedule [eventSettings]="eventData" [selectedDate]="currentDate" timezone="UTC" [currentView]="newViewMode"></ejs-schedule> Run the application with the command “ng serve” in command prompt and you will be able to view the Angular Scheduler output with loaded appointments and other settings. There are more options to explore with Angular 7 Scheduler and you can also try playing with the downloadable example link in this knowledge base article. Downloadable example link: Angular 7 Scheduler Check our Video Tutorials: Angular 7 Scheduler