To prevent users from adding '(' and ')' as part of folder names when creating or renaming folders in the Angular File Manager component, you can achieve this requirement by utilizing our beforeSend event. This event triggers before sending the AJAX request to the server. Based on this event, set the args.cancel value to true for both create and rename actions to prevent the use of the mentioned special characters.[app.component.html] <div class="sample-container"> <ejs-filemanager id="overview" [ajaxSettings]="ajaxSettings" [toolbarSettings]="toolbarSettings" [contextMenuSettings]="contextMenuSettings" [view]="view" (beforeSend)="onSend($event)" > </ejs-filemanager> </div> [app.component.ts] … export class AppComponent { … onSend(args) { const data = JSON.parse(args.ajaxSettings.data); const hasParenthesesCreate = /\(|\)/.test(data.name); const hasParenthesesRename = /\(|\)/.test(data.newName); if ((args.action === 'create' && hasParenthesesCreate) || (args.action === 'rename' && hasParenthesesRename)) { args.cancel = true; document.getElementsByClassName('e-fe-error')[0].innerHTML = 'The file or folder name contains invalid characters (parentheses).'; } } } Refer to the following link for the sample. Sample: https://stackblitz.com/edit/angular-vugddb-hcn6s9?file=src%2Fapp.component.tsConclusionI hope you enjoyed learning about how to restrict special characters in the Angular File Manager Component for folder creation and renaming.You can refer to our Angular File Manager 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 File Manager 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!
This article explains how to sort specific field members based on another field in the Angular Pivot Table. Sort specific field members based on another field in Pivot Table When working with a pivot table, you may want to sort specific field members based on the values of another field in the data source that is not bound in the report. There isn’t a direct option to accomplish this within the pivot table. However, you can achieve this through a workaround by manipulating the data source during the load event and modifying the sortSettings property. Here is a code example that shows how to sort specific field members based on other field values in a pivot table: [app.component.html] <ejs-pivotview #pivotview id="PivotView" (load)="onLoad($event)"></ejs-pivotview> [app.component.ts] import { PivotViewAllModule, LoadEventArgs } from '@syncfusion/ej2-angular-pivotview'; @Component({ imports: [PivotViewAllModule], }) export class AppComponent { public dataSourceSettings: IDataOptions; onLoad(args: LoadEventArgs): void { (args.dataSourceSettings.dataSource as any).sort((a, b) => { // Here, we sort the data source based on "Quantity" field values return a.Quantity - b.Quantity; }); } ngOnInit(): void { this.dataSourceSettings = { // Here, we sort the product field members sortSettings: [{ name: 'Products', order: 'None' }] }; } } In the above code example, we used the load event to sort the data source based on the values in the “Quantity” field. This field is not bound in the report but is present in the data source. Following this, we set the sort order for the “Products” field to None by using the sortSettings property. This allows the members of this field to be sorted based on the values in the “Quantity” field. The following screenshot, which portrays the difference between before and after sort the “Products” field members, Screenshot Before sort the field members After sort the field members For a practical demonstration, refer to the sample of stackblitz. Conclusion I hope you enjoyed learning how to sort specific field members based on another field value in Angular Pivot Table. You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data. For current customers, you can check out our components on 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, support portal, or feedback portal. We are always happy to assist you!
This article explains how to change the field drop axis in Angular Pivot Table Changing field drop axis in pivot table When you use the checkbox selection to select a field in the field list, it will be automatically added to the value axis if the field has number type; otherwise, it will be added to the row axis. However, you can change the drop axis using the fieldDrop event. This event is triggered whenever a field is dropped into an axis. It allows you to programmatically modify the field drop axis. Here is a code example that shows how to modify the drop axis for a specific field when it is selected in the field list. [app.component.html] <ejs-pivotview #pivotview="" id="PivotView" (fielddrop)="fieldDrop($event)"> </ejs-pivotview> [app.component.ts] fieldDrop(args) { if (args.draggedAxis === 'fieldlist' && args.fieldName === 'Year') { args.dropAxis = 'columns'; } } In the given example, when the Year field is chosen from the field list, the fieldDrop event modifies its drop axis to column. This means that the field will be placed on the column axis of the pivot table instead of the row axis. The following GIF image, which portrays the results of the code snippet mentioned above, GIF For a practical demonstration, refer to the sample of stackblitz. Conclusion I hope you enjoyed learning how to change the field drop axis in Angular Pivot Table. You can refer to our Angular Pivot Table feature tour feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example 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, support portal, or feedback portal. We are always happy to assist you!
This article explains how to disable grid lines in the Angular pivot chart Disable grid lines in pivot chart In certain situations, you may want to remove the grid lines in a pivot chart to achieve a cleaner and less cluttered appearance. This can be done by setting the width of the majorGridLines property to 0 within the load event. Additionally, you can disable tick lines in the pivot chart by setting the width of the majorTickLines property to 0. Here is a code snippet that guides how you can disable grid lines and tick lines: [app.component.html] <div class="control-section"> <div> <ejs-pivotview #pivotview="" id="PivotView" [chartsettings]="chartSettings" [displayoption]="displayOption"> </ejs-pivotview> </div> </div> [app.component.ts] public displayOption: DisplayOption; public chartSettings: ChartSettings; @ViewChild('pivotview') public pivotObj: PivotView; onChartLoad(args: any) { for (let i = 0; i < args.chart.axes.length; i++) { //To disable the grid lines (this.pivotObj.chart as any).axes[i].majorGridLines = { width: 0 }; //To disable the tick lines. (this.pivotObj.chart as any).axes[i].majorTickLines = { width: 0 }; } } ngOnInit(): void { this.displayOption = { view: 'Chart' } as DisplayOption; this.chartSettings = { load: this.observable.subscribe(this.onChartLoad.bind(this)) as any, } as ChartSettings; } The following screenshot, which portrays the results of the code snippet mentioned above, Screenshot: For a practical example of this code in action, you can refer to the following Sample in Stackblitz Conclusion: I hope you enjoyed learning how to disable grid lines in pivot chart. You can refer to our Angular Pivot Table feature tour feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example 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, support portal, or feedback portal. We are always happy to assist you!
This article explains how to disable the alert dialog box in the Angular pivot table Disable alert dialog box There may be instances where you have to suppress the alert dialog that pops up when you switch reports or create a new report after modifying the current report. To achieve this, use the dataBound event in your code. The dataBound event triggered when the pivot table is rendered. Here is a code snippet that guides how you can turn off the alert dialog box: [app.component.html] <div class="control-section" id="pivot-table-section"> <div> <ejs-pivotview #pivotview id="PivotView" (databound)="dataBound($event)"> </ejs-pivotview> </div> </div> [app.component.ts] @ViewChild('pivotview') public pivotObj: PivotView; dataBound() { this.pivotObj.isModified = false; this.pivotObj.toolbarModule.action = ''; } By using the above dataBound event and setting the isModified property to false, the alert dialog box is effectively turned off. Additionally, the toolbarModule.action property should be set to an empty string to clear any actions that have been set in the toolbar. For a practical demonstration, refer to the sample of stackblitz. Conclusion: I hope you enjoyed learning how to disable the alert dialog box in the Pivot Table when changing the report. You can refer to our Angular Pivot Table feature tour feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example 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, support portal, or feedback portal. We are always happy to assist you!
This knowledge base article explains how to render multiple components dynamically on the Angular Dashboard Layout component. Get Started with Angular Dashboard Layout Refer to this getting started to create an Angular Dashboard Layout component- https://ej2.syncfusion.com/angular/documentation/dashboard-layout/getting-started/ Render Dashboard Layout component Render a dashboard Layout component using `ng-template`. [app.component.html] <div class="control-section"> <div style="padding:5px;text-align: right;"> <button id="add" class="e-btn e-info" (click)="addPanel()"> Add Panel </button> </div> <ejs-dashboardlayout id="default_dashboard" #default_dashboard columns="2" [allowResizing]="true" [cellSpacing]="cellSpacing" > <e-panels> <e-panel *ngFor="let panel of panelsData" [id]="panel.id" [sizeX]="panel.sizeX" [sizeY]="panel.sizeY" [row]="panel.row" [col]="panel.col" > <ng-template #content> <span style="float:right; margin-right:40px;padding-top:10px;font-weight: bold;" (click)="addWidget($event)" >ⓘ</span > <span id="close" class="e-template-icon e-close-icon" (click)="onCloseIconHandler($event)" ></span> <div class="e-panel-container"> <div class="text-align" [id]="panel.index"> <ng-template #template> </ng-template> </div></div ></ng-template> </e-panel> </e-panels> </ejs-dashboardlayout> <div id="template"></div> <div id="modalDialog"></div> <div id="dialogcontent"> <div> <div id="line_template"> <p class="dialog-text">Line Chart (1x1)</p> </div> <div id="bar_template"> <p class="dialog-text">Bar Chart (1x1)</p> </div> <div id="grid_template"> <p class="dialog-text">Grid (2x1)</p> </div> </div> </div> </div> [app.component.ts] import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns'; import { DragAndDropEventArgs, NodeClickEventArgs, TreeViewComponent } from '@syncfusion/ej2-angular-navigations'; import { closest } from '@syncfusion/ej2-base'; import { AnalytesDragAndDrop } from './analytes-drag-and-drop'; import { Inject, ViewChildren, ViewContainerRef, QueryList, ComponentFactoryResolver, ComponentRef, } from '@angular/core'; import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { ListBoxComponent } from '@syncfusion/ej2-angular-dropdowns'; import { DragAndDropEventArgs, NodeClickEventArgs, TreeViewComponent } from '@syncfusion/ej2-angular-navigations'; import { closest } from '@syncfusion/ej2-base'; import { AnalytesDragAndDrop } from './analytes-drag-and-drop'; import { Inject, ViewChildren, ViewContainerRef, QueryList, ComponentFactoryResolver, ComponentRef, } from '@angular/core'; import { DashboardLayoutComponent, PanelModel, } from '@syncfusion/ej2-angular-layouts'; import { Dialog } from '@syncfusion/ej2-popups'; import { Chart, LineSeries, Category } from '@syncfusion/ej2-charts'; import { Button } from '@syncfusion/ej2-buttons'; import { ChartComponent } from './chart.component'; import { BarComponent } from './bar.component'; import { GridComponent } from './grid.component'; Chart.Inject(LineSeries, Category); @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], encapsulation: ViewEncapsulation.None, }) export class AppComponent { @ViewChild('default_dashboard') public dashboard: DashboardLayoutComponent; componentRef: ComponentRef<ChartComponent>; componentRefOne: ComponentRef<BarComponent>; componentRefTwo: ComponentRef<GridComponent>; // @ViewChild('template', { read: ViewContainerRef }) // viewTemplate: ViewContainerRef; @ViewChildren('template', { read: ViewContainerRef }) viewTemplate: QueryList<ViewContainerRef>; constructor(private cfr: ComponentFactoryResolver) {} public count: number = 8; public dialogObj: Dialog; public target: any; public cellSpacing: number[] = [10, 10]; public data: Object[] = [ { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 }, { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 }, { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 }, { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 }, { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 }, { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 } ]; public axis: Object = { valueType: 'Category', }; public panelsData: any = [ { index: 0, id: 'one', sizeX: 1, sizeY: 1, row: 0, col: 0 }, { index: 1, id: 'two', sizeX: 3, sizeY: 1, row: 0, col: 1 }, { index: 2, id: 'three', sizeX: 2, sizeY: 1, row: 1, col: 0 } ]; addPanel(): void { let panel: PanelModel[] = [ { id: this.count.toString(), sizeX: 1, sizeY: 1, row: 0, col: 0, content: '<span id="close" class="e-template-icon e-close-icon"></span><div class="text-align">' + this.count.toString() + '</div>' }, ]; this.dashboard.addPanel(panel[0]); let closeIcon: any = document .getElementById(this.count.toString()) .querySelector('.e-close-icon'); closeIcon.addEventListener('click', this.onCloseIconHandler.bind(this)); this.count = this.count + 1; } onCloseIconHandler(event: any): void { if ((<HTMLElement>event.target).offsetParent) { this.dashboard.removePanel((<HTMLElement>event.target).offsetParent.id); } } ... Render Angular Grid and Chart components Render Data Grid, Line Chart, and Bar Chart components inside the app folder using Angular `template`. [grid.component.ts] import { Component, ViewEncapsulation, Input, Inject, ViewChild, } from '@angular/core'; @Component({ selector: 'grid-root', template: `<ejs-grid [dataSource]='gridData'> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column> <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column> </e-columns> </ejs-grid>`, encapsulation: ViewEncapsulation.None, }) export class GridComponent { @Input() gridData: Object[]; ngOnInit(): void {} } [chart.component.ts] import { Component, ViewEncapsulation, Input, Inject, ViewChild, } from '@angular/core'; @Component({ selector: 'chart-root', template: `<ejs-chart [primaryXAxis]="primaryXAxis" width="100%" height="100%" > <e-series-collection> <e-series [dataSource]="chartData" type="Line" xName="month" yName="sales" name="Sales" ></e-series> </e-series-collection> </ejs-chart>`, encapsulation: ViewEncapsulation.None, }) export class ChartComponent { @Input() primaryXAxis: Object; @Input() chartData: Object[]; ngOnInit(): void { // Data for chart series } } [bar.component.ts] import { Component, ViewEncapsulation, Input, Inject, ViewChild, } from '@angular/core'; @Component({ selector: 'bar-root', template: `<ejs-chart style="display:block;" [chartArea]="chartArea" width="100%" height="100%" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [title]="title" [tooltip]="tooltip" > <e-series-collection> <e-series [dataSource]="data" type="Bar" xName="x" yName="y" name="Imports" [marker]="marker" > </e-series> <e-series [dataSource]="data1" type="Bar" xName="x" yName="y" name="Exports" [marker]="marker" > </e-series> </e-series-collection> </ejs-chart>`, encapsulation: ViewEncapsulation.None, }) export class BarComponent { public chartArea: Object = { border: { width: 0, } }; //Initializing Chart Width @Input() data: Object[]; @Input() data1: Object[]; //Initializing Marker public marker: Object = { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff', }, }, }; //Initializing Primary X Axis public primaryXAxis: Object = { valueType: 'Category', title: 'Food', interval: 1, majorGridLines: { width: 0 }, }; //Initializing Primary Y Axis public primaryYAxis: Object = { labelFormat: '{value}B', edgeLabelPlacement: 'Shift', majorGridLines: { width: 0 }, majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent', }, }; public tooltip: Object = { enable: true, }; // custom code end public title: string = 'UK Trade in Food Groups - 2015'; constructor() { //code } } Render dynamic components as content of the Dashboard Layout Render Angular component as panel content of the Dashboard Layout based on the selection using Angular’s `ComponentFactoryResolver’. [app.component.ts] export class AppComponent { ... addWidget(event) { this.target = event.target.closest('.e-panel').querySelector('.text-align'); if (this.dialogObj == undefined) { this.dialogObj = new Dialog({ width: '500px', header: 'Add a widget', showCloseIcon: true, animationSettings: { effect: 'Zoom' }, content: document.getElementById('dialogcontent'), target: document.getElementById('target'), isModal: true, height: '260px', visible: false, }); this.dialogObj.appendTo('#modalDialog'); } this.dialogObj.show(); document.getElementById('line_template').onclick = () => { this.dialogObj.hide(); //Get the panel index. var count = this.target.id; this.viewTemplate.map((vcr: ViewContainerRef, index: number) => { //Check whether the panel index matches reference index. if (index == count && this.target.innerText == '') { const componentFactory = this.cfr.resolveComponentFactory(ChartComponent); this.componentRef = vcr.createComponent(componentFactory); this.componentRef.instance.chartData = this.data; this.componentRef.instance.primaryXAxis = this.axis; } }); }; document.getElementById('bar_template').onclick = () => { this.dialogObj.hide(); var count = this.target.id; this.viewTemplate.map((vcr: ViewContainerRef, index: number) => { if (index == count && this.target.innerText == '') { const componentFactory = this.cfr.resolveComponentFactory(BarComponent); this.componentRefOne = vcr.createComponent(componentFactory); this.componentRefOne.instance.data = [ { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 }, { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }, ]; this.componentRefOne.instance.data1 = [ { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 }, { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }, ]; } }); }; document.getElementById('grid_template').onclick = () => { this.dialogObj.hide(); var count = this.target.id; this.viewTemplate.map((vcr: ViewContainerRef, index: number) => { if (index == count && this.target.innerText == '') { const componentFactory = this.cfr.resolveComponentFactory(GridComponent); this.componentRefTwo = vcr.createComponent(componentFactory); this.componentRefTwo.instance.gridData = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5), ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67', ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, }, ]; } }); }; } } GitHub sample - https://github.com/SyncfusionExamples/angular-dashboard-layout-dynamic-components
A quick start project that helps you to create an Angular 7 DateRangePicker component with a minimal code configuration. Angular 7 DateRangePicker The following section explains the steps required to create a simple Angular 7 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 7+ Angular CLI TypeScript 2.6+ Visual studio code for editor Introduction The Angular 7 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 7 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 7 using following command. npm install @angular/cli@7.0.4 -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 7 DateRangePicker You can add the Angular 7 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 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 9 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 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 If you need to follow and run the application in Angular 8 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 9 application ng new badge-angular9 cd badge-angular9 Installing EJ2 Badge npm install @syncfusion/ej2-angular-notifications --save Serve the application ng serve --open Your application will open in a browser in the http://localhost:4200. Refer to following screenshot for Angular 9 version. Adding Angular 9 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. Conclusion I hope you enjoyed learning about how to get started easily with Syncfusion Angular 9 Badge.You can refer to our Angular Badge 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 Badge example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
A quick start project that helps you to create an Angular 9 Material file Uploader component with a minimal code configuration. Angular 9 Material File Uploader The following section explains the steps required to create a simple Angular 9 Material file Uploader component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 9+ Angular CLI TypeScript 3.7+ Visual Studio code for editor Introduction The Angular 9 Material file Uploader used in this project is created from the Syncfusion ej2-angular-inputs package. You can simply define it as <ejs-uploader> within the template. Dependencies Before starting with this project, the Angular 9 Material file Uploader requires to add the Syncfusion ej2-angular-inputs package from npmjs, which are distributed in npm as @syncfusion scoped packages. File Uploader requires the following dependent packages for rendering file Uploader component. |-- @syncfusion/ej2-angular-inputs |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-angular-popups |-- @syncfusion/ej2-angular-buttons |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-base |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the file Uploader component. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 9 using following command. npm install @angular/cli@9.0.2 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-inputs package through the npm install command. npm install @syncfusion/ej2-angular-inputs --save Adding Angular 9 Material File Uploader You can add the Angular 9 file Uploader component by using the ejs-uploader directive and the attributes within the tag allows you to define other functionalities. Import the Uploader module into the Angular application (app.module.ts) from the ej2-angular-inputs package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { UploaderModule } from '@syncfusion/ej2-angular-inputs'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, UploaderModule], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular file Uploader code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the file Uploader component is rendered with the asyncSettings property. [app.component.ts] import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public path: Object = { saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save', removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove' }; } [app.component.html] <ejs-uploader [asyncSettings]='path'></ejs-uploader> Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css'; Run the application with the command ng serve and an file Uploader with material theme will be displayed on the browser as follows. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
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 9 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 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 Note: If you need to follow and run the application in Angular 8 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 9 application ng new avatar-angular9 cd avatar-angular9 Installing EJ2 Avatar npm install @syncfusion/ej2-angular-layouts --save Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 9 version. Adding Angular 9 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 Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential JS2 Angular Treeview component is used to represent hierarchical data in a tree-like structure with advanced functions to edit, drag and drop, select with CheckBox, and more. TreeView can be populated from a data source such as an array of JavaScript objects or from DataManager. This article explains how to easily get started with EJ2 Treeview component in Angular 9 project with minimal code. Prerequisites Before starting, the following tools and SDK needs to be installed in your machine to Angular 9 application: Node.js (v8.10.0 or above) Angular 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 Note: To follow and run the application in Angular 8 or earlier version, you can replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 9 application ng new treeview-angular9 cd treeview-angular9 Installing EJ2 Treeview npm install @syncfusion/ej2-angular-navigations Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 9 version. Adding Angular 9 Treeview You can add the Angular 9 treeview component by using `ejs-treeview` tag and the attributes used within this tag allows you to define other Treeview functionalities. Import TreeViewModule into app.module.ts file from the @syncfusion/ej2-angular-navigations package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TreeViewModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the Treeview component. [style.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; Add the Treeview component in the template file. [app.component.html] <ejs-treeview [fields]="fields"></ejs-treeview> Add the fields property with dataSource as below in a component file. [app.component.ts] export class AppComponent { fields: FieldsSettingsModel = { dataSource: [ { id: "1", text: "item 1" }, { id: "2", text: "item 2", child: [ { id: "2-1", text: "child 1" }, { id: "2-2", text: "child 2" }, ] }, { id: "3", text: "item 3" }, ] } } Run the application with the following command and you should the see the below represented output of the EJ2 Angular Treeview component. ng serve --open Checkbox Checkbox allows you to check more than one node in TreeView without affecting the UI's appearance by enabling the showCheckBox property. When this property is enabled, checkbox appears before each TreeView node text. [app.component.html] <ejs-treeview [fields]="fields" showCheckBox="true"></ejs-treeview> After mapping the properties, you should see the Treeview with checkbox enabled when you run the application as shown in the following image. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
Essential JS 2 PDF Viewer 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. Refer to the following link for getting started with PDF Viewer. https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-startedLoading URL from client in PDF ViewerPDF Viewer do not have support to load the PDF document from the URL directly. However, you can load the PDF document by converting the URL to base64 string using the client-side load() API in the sample level. Refer to the following code. App.Component.html <button (click)="load()">LoadDocument</button> <div class="content-wrapper"> <ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' style="height:850px;display:block"></ejs-pdfviewer> </div> App.Component.ts export class AppComponent implements OnInit { public service = 'https://localhost:55767/pdfviewer'; load() { var pdfdata; var staticUrl = 'https://files2.syncfusion.com/dtsupport/directtrac/general/pd/HTTP_Succinctly-1719682472.pdf'; var xhr = new XMLHttpRequest(); xhr.open('GET', staticUrl, true); xhr.responseType = 'blob'; xhr.onload = function (e) { if (this.status == 200) { var myBlob = this.response; var reader = new window.FileReader(); //read the blob data reader.readAsDataURL(myBlob); reader.onloadend = function () { var base64data = reader.result; // Typecast the HTMLElement to avoid Typescript lint issue var pdfviewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0]; // load the base64 string pdfviewer.load(base64data, null); } } }; xhr.send(); } ngOnInit(): void { } } Angular sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app302916509 Web API: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-pdfviewer-web-service798878714 Note:Run the WebAPI first, then provide that Url in the serviceUrl property of the PDF Viewer. Blob storage Url should contain the name of the PDF document as follows 'http://files2.syncfusion.com/dtsupport/directtrac/general/pd/HTTP_Succinctly-1719682472.pdf'ConclusionI hope you enjoyed learning how to load PDF document from online URL in PDF Viewer.You can refer to our Angular PDF Viewer 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 PDF Viewer 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 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!
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 8 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 8 Angular CLI Installation and application creation You can install Angular CLI 8 using the following command. npm install -g @angular/cli@8.1.1 Note: If you need to follow and run the application in Angular 7 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 8 application ng new avatar-angular8 cd avatar-angular8 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 8 version. Adding Angular 8 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 Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!ConclusionI hope you enjoyed learning how to get started easily with Syncfusion Angular 8 Avatar components.You can refer to our Angular Avatar 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 Avatar 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 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 7+ TypeScript 2.6+ Angular 7 Toolbar – Introduction The Angular 7 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 7 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@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-navigations package through the npm install command.npm install @syncfusion/ej2-angular-navigations --save Adding Angular 7 Toolbar You can add the Angular 7 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 7 Toolbar.ConclusionI hope you enjoyed learning about how to get started easily with Syncfusion Angular 7 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!
The Essential JS 2 Angular Word Processor is a component that have editing capabilities like Microsoft Word. It is also known as document editor, and it is used to create, edit, view, and print the Word documents. It provides all the common Word processing features including editing text, formatting contents, resizing image and tables, finding and replacing text, bookmarks, tables of contents, printing, and importing and exporting Word documents. This article explains how to easily integrate Syncfusion Angular Word Processor in Angular 8 application and how to enable its commonly used features using services. Prerequisites Before start, the following items are required to create Angular Word Processor in Angular 8 application: Node.js (latest version) Angular 8 Angular CLI Visual Studio code for editor Installation and application creation Install Angular cli 8 using the following command. npm install -g @angular/cli@8.1.1 Note:To follow and run the application in Angular 7, or Angular 6, or Angular 5, or Angular 4, you should replace the CLI command version number with corresponding Angular version number. npm install -g @angular/cli@<CLI VERSION> Create an Angular 8 application using Angular cli. ng new angular8-app cd angular8-app Serve the Angular 8 application using the following command. ng serve Listen the application in localhost:4200. Your application will serve in the browser as follows. Integration of Angular Word Processor a.k.a Document Editor After running the Angular 8 application successfully, configure the Angular Document Editor in this application. Install Angular Document Editor and EJ2 package using the following command. The —save command will instruct the NPM to include a document editor package inside the dependencies section of the package.json. npm install @syncfusion/ej2-angular-documenteditor --save npm install @syncfusion/ej2 --save Import DocumentEditorContainerAllModule from installed package in app/app.module.ts.import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { DocumentEditorContainerAllModule } from '@syncfusion/ej2-angular-documenteditor'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DocumentEditorContainerAllModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } You should refer to the CSS file for Angular Document Editor in style.css @import "../node_modules/@syncfusion/ej2/material.css"; Add the Angular Document Editor component in app.component.html. <ejs-documenteditorcontainer></ejs-documenteditorcontainer> Now, define the service URL for this Document Editor in app.component.ts. Service URL is required for opening a Word document (Refer to https://ej2.syncfusion.com/angular/documentation/document-editor/import/?no-cache=1#convert-word-documents-into-sfdt )import { Component, ViewChild } from '@angular/core'; import { ToolbarService } from '@syncfusion/ej2-angular-documenteditor'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [ToolbarService] }) export class AppComponent { title = 'angular7-app'; public serviceLink: string; ngOnInit() { //Service URL is required for opening word documents in DocumentEditor //Documentation link: https://ej2.syncfusion.com/angular/documentation/document-editor/import/?no-cache=1#convert-word-documents-into-sfdt this.serviceLink = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'; } } After defining service link, define Document Editor’s serviceUrl in app.component.html.<ejs-documenteditorcontainer #documenteditor_default [serviceUrl]='serviceLink' style="display:block;height:600px"></ejs-documenteditorcontainer> Now, serve the application using following command. ng serve --open After all the files are compiled successfully, it will serve the site at localhost:4200 The following screenshot explains this. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
You can insert the ListBox item as text content into Rich Text Editor by drag and drop using the ‘executeCommand’ method. Follow the below mentioned steps to achieve this functionality:. Initialize the ListBox and RichTextEditor component. <div class="control-section"> <ejs-listbox id="listbox" [dataSource]='data'> </ejs-listbox> <br /> <br /> <br /> <ejs-richtexteditor #RTE id='defaultRTE' (created)='onCreate()'> </ejs-richtexteditor> </div> Define data source by configuring draggable as true in htmlAttributes to enable dragging the items in ListBox. public data: { [key: string]: Object }[] = [ { text: 'Hennessey Venom', id: 'list-01', "htmlAttributes": { draggable: true } }, { text: 'Bugatti Chiron', id: 'list-02', "htmlAttributes": { draggable: true } }, { text: 'Bugatti Veyron Super Sport', id: 'list-03', "htmlAttributes": { draggable: true } } ]; Bind the drop event to the Rich Text Editor’s edit element, which is used to get and insert dropped text into RTE. this.editArea = document.querySelector("#defaultRTE .e-content") as HTMLElement; // Drop handler this.editArea.addEventListener("drop", this.dropHandler.bind(this)); Bind the dragStart event to LissitBox element to get dragged item text content. this.listboxEle = document.getElementById('listbox') as HTMLElement; // DragStart event binding this.listboxEle.addEventListener("dragstart", function (e) { e.dataTransfer.setData("Text", e.target.innerText); }); Include the following code to dropHandler function to insert the text into the Rich Text Editor. dropHandler(e: any): void { //Prevent browser default dragop and drop action e.preventDefault(); // Do drop action if the target is inside RTE edit area if (this.rteObj.inputElement.contains(e.target)) { let range: Range; if (this.rteObj.contentModule.getDocument().caretRangeFromPoint) { range = this.rteObj.contentModule.getDocument().caretRangeFromPoint(e.clientX, e.clientY); } else if (e.rangeParent) { range = this.rteObj.contentModule.getDocument().createRange(); range.setStart(e.rangeParent, e.rangeOffset); } this.rteObj.selectRange(range); if (this.rteObj.formatter.getUndoRedoStack().length === 0) { this.rteObj.formatter.saveData(); } let text: string = e.dataTransfer.getData('Text').replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, ''); this.rteObj.executeCommand("insertHTML", text); this.rteObj.formatter.saveData(); this.rteObj.formatter.enableUndo(this.rteObj); } } Refer to the followingbelow sample for more details. Sample: https://stackblitz.com/edit/angular-kncnqt-neetwn?file=package.json
The Essential Angular Tooltip component is used to display a pop-up that contains information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip includes simple text, images, hyperlinks, or custom templates. In mobile devices, to display the tooltip, tap and hold the target elements. This KB article explains how to easily get started with EJ2 Tooltip component in Angular 9 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 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 Note: If you want to follow and run the application in Angular 8 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 9 application ng new tooltip-angular9 cd tooltip-angular9 Installing EJ2 Tooltip npm install @syncfusion/ej2-angular-popups Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 9 version. Adding Angular 9 Tooltip You can add the Angular 9 Tooltip component by using the `ejs-tooltip` tag. The attributes used within this tag allow you to define other functionalities of tooltip. Import TooltipModule into the app.module.ts file from the @syncfusion/ej2-angular-popups package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TooltipModule } from '@syncfusion/ej2-angular-popups'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TooltipModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the tooltip component. [style.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css'; Add the tooltip component in the template file. [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-tooltip id="tooltip" content="Tooltip Content"> <button>Hover Me!</button> </ejs-tooltip> </div> Run the application using the following command, and you can see the following represented output of the EJ2 Angular Tooltip component. ng serve --open Position The tooltip can be shown on the following 12 positions by selecting the appropriate position values provided in the drop-down: TopLeft TopCenter TopRight BottomLeft BottomCenter BottomRight LeftTop LeftCenter LeftBottom RightTop RightCenter RightBottom [app.component.html] <div style="width: 300px; margin: 150px;"> <ejs-tooltip id="tooltip" content="Tooltip Content" position="LeftCenter"> <button>Hover Me!</button> </ejs-tooltip> </div> Open mode Tooltip supports different types of trigger such as Auto, Hover, Click, and Custom to open the tooltip on its target element using the “opensOn” property. [app.component.html] <div style="width: 300px; margin: 150px;"> <ejs-tooltip id="tooltip" content="Tooltip Content" opensOn="Click"> <button>Hover Me!</button> </ejs-tooltip> </div> Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you! ConclusionI hope you enjoyed learning about how to get started with Angular 9 Tooltip.You can refer to our Angular Tooltip feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Angular Tooltip example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The Essential JS2 Angular 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 8 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 8 Angular CLI Installation and application creation You can install Angular CLI 8 using the following command. npm install -g @angular/cli@8.1.1 If you need to follow and run the application in Angular 7 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 8 application ng new badge-angular8 cd badge-angular8 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 8 version. Adding Angular 8 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. Conclusion I hope you enjoyed learning about how to get started easily with Syncfusion Angular 8 Badge.You can refer to our Angular Badge 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 Badge example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The Essential JS2 Angular Slider component is used to allow users to select a value or range of values in-between the min and max range by dragging the handle over the slider track. This article explains how to easily get started with EJ2 Slider component in Angular 9 project with minimal code. Prerequisites Before starting, the following tools and SDK needs to be installed in your machine to Angular 9 application. Node.js (v8.10.0 or above) Angular 9 Angular CLI Installation and application creation You can install Angular CLI 9 using the following command. npm install -g @angular/cli@9.0.2 Note: To follow and run the application in Angular 8 or earlier version, you can replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 9 application ng new slider-angular9 cd slider-angular9 Installing EJ2 Slider npm install @syncfusion/ej2-angular-inputs Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 9 version. Adding Angular 9 Slider You can add the Angular 9 Slider component by using `ejs-slider` tag and the attributes used ithin this tag allows you to define other Slider functionalities. Import SliderModule into app.module.ts file from the @syncfusion/ej2-angular-inputs package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { SliderModule } from '@syncfusion/ej2-angular-inputs'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SliderModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the Slider component. [style.css] @import '../node_modules/@syncfusion/ej2-angular-inputs/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-popups/styles/material.css'; Add the Slider component in the template file. [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-slider id="slider" value="50"></ejs-slider> </div> Run the application with the following command and you should the see the below represented output of the EJ2 Angular Slider component. ng serve --open Ticks Ticks is the important feature in Sliders, users can identify the current position and its value by just seeing the scale present just above or below the Slider track. You can enable “ticks” in Slider using the “ticks” property. Define the “ticks” property in your component file as below. [app.component.ts] export class AppComponent { ticks: TicksDataModel = { placement: 'Both', largeStep: 20, showSmallTicks: true, smallStep: 10 } } Map the “ticks” property defined in the component to template file as below. [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-slider id="slider" value="50" [ticks]="ticks"></ejs-slider> </div> After mapping the properties, you should see the Slider with ticks enabled when you run the application as shown in the following image. Tooltip EJ2 Slider has built-in Tooltip to display the current value of the slider, this feature will be particularly useful when the range difference between minimum and maximum value is large to identify the current value. You can enable “tooltip” in Slider using the “tooltip” property. Define the “tooltip” property in your component file as below. [app.component.ts] tooltip: TooltipDataModel = { isVisible: true } [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-slider id="slider" value="50" [ticks]="ticks" [tooltip]="tooltip"></ejs-slider> </div> After mapping the properties, you should see the Slider with tooltip enabled when you run the application as shown in the following image. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
The Essential Angular Tooltip component is used to display a pop-up that contains information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip includes simple text, images, hyperlinks, or custom templates. In mobile devices, to display the tooltip, tap and hold the target elements. This KB article explains how to easily get started with EJ2 Tooltip component in Angular 8 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 8 Angular CLI Installation and application creation You can install Angular CLI 8 using the following command. npm install -g @angular/cli@8.1.1 Note: If you want to follow and run the application in Angular 7 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 8 application ng new tooltip-angular8 cd tooltip-angular8 Installing EJ2 Tooltip npm install @syncfusion/ej2-angular-popups Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following screenshot for Angular 8 version. Adding Angular 8 Tooltip You can add the Angular 8 Tooltip component by using the `ejs-tooltip` tag. The attributes used within this tag allow you to define other functionalities of tooltip. Import TooltipModule into the app.module.ts file from the @syncfusion/ej2-angular-popups package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { TooltipModule } from '@syncfusion/ej2-angular-popups'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, TooltipModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the tooltip component. [style.css] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-popups/styles/material.css'; Add the tooltip component in the template file. [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-tooltip id="tooltip" content="Tooltip Content"> <button>Hover Me!</button> </ejs-tooltip> </div> Run the application using the following command, and you can see the following represented output of the EJ2 Angular Tooltip component. ng serve --open Position The tooltip can be shown on the following 12 positions by selecting the appropriate position values provided in the drop-down: TopLeft TopCenter TopRight BottomLeft BottomCenter BottomRight LeftTop LeftCenter LeftBottom RightTop RightCenter RightBottom [app.component.html] <div style="width: 300px; margin: 150px;"> <ejs-tooltip id="tooltip" content="Tooltip Content" position="LeftCenter"> <button>Hover Me!</button> </ejs-tooltip> </div> Open mode Tooltip supports different types of trigger such as Auto, Hover, Click, and Custom to open the tooltip on its target element using the “opensOn” property. [app.component.html] <div style="width: 300px; margin: 150px;"> <ejs-tooltip id="tooltip" content="Tooltip Content" opensOn="Click"> <button>Hover Me!</button> </ejs-tooltip> </div> ConclusionI hope you enjoyed learning about how to get started with Angular 8 Tooltip.You can refer to our Angular Tooltip feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Angular Tooltip 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!
Issue replication step The ‘workDays’ property is given by property binding usingthrough the method aslike below code. The Scheduler will be flickered and re-rendered multiple times. In src/app.component.html file.[workDays]="getWorkDays()" In src/app.component.ts file.public getWorkDays() { let workDays = [1,2,3]; return workDays; } To prevent the Schedule re-rendering Need to import the ‘ChangeDetectionStrategy’ package from the ‘@angular/core’ in app.component.ts file as follows.like below.import { Component, ChangeDetectionStrategy } from '@angular/core'; Use ‘ChangeDetectionStrategy.OnPush’ as the followinglike below code snippet. @Component({ selector: ‘app-root’, providers: [WeekService, MonthService, ResizeService, DragAndDropService], changeDetection: ChangeDetectionStrategy.OnPush }) Please rRefer to the example from the following GitHub link. Example – Scheduler with workDays property
The Essential JS2 Angular Slider component is used to allow users to select a value or range of values in-between the min and max range by dragging the handle over the slider track. This article explains how to easily get started with EJ2 Slider component in Angular 8 project with minimal code. Prerequisites Before starting, the following tools and SDK needs to be installed in your machine to Angular 8 application. Node.js (v8.10.0 or above) Angular 8 Angular CLI Installation and application creation You can install Angular CLI 8 using the following command. npm install -g @angular/cli@8.1.1 Note: To follow and run the application in Angular 7 or earlier version, you can replace the CLI command version with your preferred version and install it. npm install -g @angular/cli@<CLI VERSION> Create an Angular 8 application ng new slider-angular8 cd slider-angular8 Installing EJ2 Slider npm install @syncfusion/ej2-angular-inputs Serve the application ng serve --open Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 8 version. Adding Angular 8 Slider You can add the Angular 8 Slider component by using `ejs-slider` tag and the attributes used ithin this tag allows you to define other Slider functionalities. Import SliderModule into app.module.ts file from the @syncfusion/ej2-angular-inputs package. [app.module.ts] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { SliderModule } from '@syncfusion/ej2-angular-inputs'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, SliderModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Import the CSS styles of the Slider component. [style.css] @import '../node_modules/@syncfusion/ej2-angular-inputs/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-popups/styles/material.css'; Add the Slider component in the template file. [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-slider id="slider" value="50"></ejs-slider> </div> Run the application with the following command and you should the see the below represented output of the EJ2 Angular Slider component. ng serve --open Ticks Ticks is the important feature in Sliders, users can identify the current position and its value by just seeing the scale present just above or below the Slider track. You can enable “ticks” in Slider using the “ticks” property. Define the “ticks” property in your component file as below. [app.component.ts] export class AppComponent { ticks: TicksDataModel = { placement: 'Both', largeStep: 20, showSmallTicks: true, smallStep: 10 } } Map the “ticks” property defined in the component to template file as below. [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-slider id="slider" value="50" [ticks]="ticks"></ejs-slider> </div> After mapping the properties, you should see the Slider with ticks enabled when you run the application as shown in the following image. Tooltip EJ2 Slider has built-in Tooltip to display the current value of the slider, this feature will be particularly useful when the range difference between minimum and maximum value is large to identify the current value. You can enable “tooltip” in Slider using the “tooltip” property. Define the “tooltip” property in your component file as below. [app.component.ts] tooltip: TooltipDataModel = { isVisible: true } [app.component.html] <div style="width: 300px; margin: 50px;"> <ejs-slider id="slider" value="50" [ticks]="ticks" [tooltip]="tooltip"></ejs-slider> </div> After mapping the properties, you should see the Slider with tooltip enabled when you run the application as shown in the following image. Summary Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
A quick start project that helps you to create an Angular 4 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 4+ 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 4 project creation steps using the Angular CLI tool. Install the Angular CLI application in your machine.npm install -g @angular/cli@1.4 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 4 Card You can add the Angular 4 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 4 Card.
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; }
