This article explains how to apply a theme in Blazor Charts using the Theme property of the SfChart component. Overview Blazor Charts allows you to customize the appearance of charts using predefined themes. You can apply a theme by setting the Theme property in the SfChart component. This enables consistent styling aligned with your application’s look and feel. Code Example The following example demonstrates how to apply the MaterialDark theme to a chart. @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor <div> <SfChart Title="Olympic Medal Counts - RIO" Theme="@Theme"> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1"> </ChartPrimaryXAxis> <ChartPrimaryYAxis Title="Medal Count" Maximum="50" Interval="10"> </ChartPrimaryYAxis> <ChartSeriesCollection> <ChartSeries TooltipMappingName="MappingName" DataSource="@ChartPoints" XName="Country" YName="GoldMedal" Name="Gold" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"> </ChartSeries> <ChartSeries TooltipMappingName="MappingName" DataSource="@ChartPoints" XName="Country" YName="SilverMedal" Name="Silver" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"> </ChartSeries> <ChartSeries TooltipMappingName="MappingName" DataSource="@ChartPoints" XName="Country" YName="BronzeMedal" Name="Bronze" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column"> </ChartSeries> </ChartSeriesCollection> </SfChart> </div> @code { private Theme Theme { get; set; } public List<ColumnChartData> ChartPoints { get; set; } = new List<ColumnChartData> { new ColumnChartData { Country = "GBR", GoldMedal = 27, SilverMedal = 23, BronzeMedal = 17, MappingName = "Great Britain" }, new ColumnChartData { Country = "CHN", GoldMedal = 26, SilverMedal = 18, BronzeMedal = 26, MappingName = "China" }, new ColumnChartData { Country = "AUS", GoldMedal = 8, SilverMedal = 11, BronzeMedal = 10, MappingName = "Australia" }, new ColumnChartData { Country = "RUS", GoldMedal = 19, SilverMedal = 17, BronzeMedal = 20, MappingName = "Russia" }, new ColumnChartData { Country = "GER", GoldMedal = 17, SilverMedal = 10, BronzeMedal = 15, MappingName = "Germany" }, new ColumnChartData { Country = "UA", GoldMedal = 2, SilverMedal = 5, BronzeMedal = 24, MappingName = "Ukraine" }, new ColumnChartData { Country = "ES", GoldMedal = 7, SilverMedal = 4, BronzeMedal = 6, MappingName = "Spain" }, new ColumnChartData { Country = "UZB", GoldMedal = 4, SilverMedal = 2, BronzeMedal = 7, MappingName = "Uzbekistan" }, new ColumnChartData { Country = "JPN", GoldMedal = 12, SilverMedal = 8, BronzeMedal = 21, MappingName = "Japan" }, new ColumnChartData { Country = "NL", GoldMedal = 8, SilverMedal = 7, BronzeMedal = 4, MappingName = "NetherLand" }, new ColumnChartData { Country = "USA", GoldMedal = 46, SilverMedal = 37, BronzeMedal = 38, MappingName = "United States" }, }; protected override void OnInitialized() { Theme = Theme.MaterialDark; } public class ColumnChartData { public string Country { get; set; } public double GoldMedal { get; set; } public double SilverMedal { get; set; } public double BronzeMedal { get; set; } public string MappingName { get; set; } } } Output The chart will render with the Material Dark theme applied. Live Sample You can view a live example of applying a theme to Blazor Charts here. Conclusion: We hope you found this guide helpful in learning how to apply a theme in Blazor Charts. For more features, visit our [Blazor Charts 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 [Blazor Charts 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!
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.
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!
A quick start project that helps you to create an Angular 7 Material TimePicker component with a minimal code configuration. Angular 7 Material TimePicker The following section explains the steps required to create a simple Angular 7 Material TimePicker component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 7+ Angular CLI TypeScript 2.6+ Visual Studio code for editor Introduction The Angular 7 Material TimePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-timepicker> within the template. Dependencies Before starting with this project, the Angular 7 Material TimePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages. TimePicker require following dependent packages for rendering the TimePicker component. |-- @syncfusion/ej2-angular-calendars |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-base |-- @syncfusion/ej2-calendars |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-splitbuttons |-- @syncfusion/ej2-lists |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the TimePicker component. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 7 using following command. npm install @angular/cli@7.0.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-calendars package using the npm install command. npm install @syncfusion/ej2-angular-calendars --save Adding Angular 7 Material TimePicker You can add the Angular 7 TimePicker component by using ejs-timepicker directive and the attributes within the tag allows you to define other functionalities. Import the TimePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'; import { AppCompnent } from './app.component'; @NgModule({ imports: [ BrowserModule, TimePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular TimePicker code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the TimePicker component is rendered with the min and max properties. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public month: number = new Date().getMonth(); public fullYear: number = new Date().getFullYear(); public date: number = new Date().getDate(); public dateValue: Date = new Date(this.fullYear, this.month , this.date, 10, 0, 0); public minValue: Date = new Date(this.fullYear, this.month , this.date, 7, 0, 0); public maxValue: Date = new Date(this.fullYear, this.month, this.date, 16, 0 ,0); constructor () {} } [app.component.html] <ejs-timepicker [value]='dateValue' [min]='minValue' [max]='maxValue'></ejs-timepicker> Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Run the application with the command ng serve and a TimePicker with material theme will be displayed on the browser as follows. Also, you can download and run the sample in this GitHub Repository. For more information about TimePicker functionalities, refer to the UG Documentation, API Reference and Samples section.
A quick start project that helps you to create an Angular 8 Material TimePicker component with a minimal code configuration. Angular 8 Material TimePicker The following section explains the steps required to create a simple Angular 8 Material TimePicker component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 8+ Angular CLI TypeScript 3.4+ Visual Studio code for editor Introduction The Angular 8 Material TimePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-timepicker> within the template. Dependencies Before starting with this project, the Angular 8 Material TimePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages. TimePicker require following dependent packages for rendering the TimePicker component. |-- @syncfusion/ej2-angular-calendars |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-base |-- @syncfusion/ej2-calendars |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-splitbuttons |-- @syncfusion/ej2-lists |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the TimePicker component. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 8 using following command. npm install -g @angular/cli@8.1.1 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-calendars package using the npm install command. npm install @syncfusion/ej2-angular-calendars --save Adding Angular 8 Material TimePicker You can add the Angular 8 TimePicker component by using ejs-timepicker directive and the attributes within the tag allows you to define other functionalities. Import the TimePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, TimePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular TimePicker code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the TimePicker component is rendered with the min and max properties. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public month: number = new Date().getMonth(); public fullYear: number = new Date().getFullYear(); public date: number = new Date().getDate(); public dateValue: Date = new Date(this.fullYear, this.month , this.date, 10, 0, 0); public minValue: Date = new Date(this.fullYear, this.month , this.date, 7, 0, 0); public maxValue: Date = new Date(this.fullYear, this.month, this.date, 16, 0 ,0); constructor () {} } [app.component.html] <ejs-timepicker [value]='dateValue' [min]='minValue' [max]='maxValue'></ejs-timepicker> Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Run the application with the command ng serve and a TimePicker with material theme will be displayed on the browser as follows. ConclusionI hope you enjoyed learning about how to get started easily with Syncfusion Angular 8 Material TimePicker.You can refer to our Angular TimePicker 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 TimePicker example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
A quick start project that helps you to create an Angular 9 Material TimePicker component with a minimal code configuration. Angular 9 Material TimePicker The following section explains the steps required to create a simple Angular 9 Material TimePicker component. Prerequisites Make sure that you have the compatible versions of Angular in your machine before starting to work on this project. Node.js Angular 9+ Angular CLI TypeScript 3.7+ Visual Studio code for editor Introduction The Angular 9 Material TimePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-timepicker> within the template. Dependencies Before starting with this project, the Angular 9 Material TimePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages. TimePicker require following dependent packages for rendering the TimePicker component. |-- @syncfusion/ej2-angular-calendars |-- @syncfusion/ej2-angular-base |-- @syncfusion/ej2-base |-- @syncfusion/ej2-calendars |-- @syncfusion/ej2-inputs |-- @syncfusion/ej2-splitbuttons |-- @syncfusion/ej2-lists |-- @syncfusion/ej2-popups |-- @syncfusion/ej2-buttons The following CSS styles require dependencies to render the TimePicker component. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Creating Angular Project To create the Angular project using the Angular CLI tool, follow the given steps. Install Angular CLI 9 using following command. npm install -g @angular/cli@9.0.2 Now, create a new Angular project by using the command ng new and navigate to that folder. ng new <project name> cd <project name> Install the ej2-angular-calendars package using the npm install command. npm install @syncfusion/ej2-angular-calendars --save Adding Angular 9 Material TimePicker You can add the Angular 9 TimePicker component by using ejs-timepicker directive and the attributes within the tag allows you to define other functionalities. Import the TimePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, TimePickerModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule {} Define the Angular TimePicker code within the app.component.html file mapped against the templateUrl option in app.component.ts file. Here, the TimePicker component is rendered with the min and max properties. [app.component.ts] import {Component} from '@angular/core'; @Component ({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { public month: number = new Date().getMonth(); public fullYear: number = new Date().getFullYear(); public date: number = new Date().getDate(); public dateValue: Date = new Date(this.fullYear, this.month , this.date, 10, 0, 0); public minValue: Date = new Date(this.fullYear, this.month , this.date, 7, 0, 0); public maxValue: Date = new Date(this.fullYear, this.month, this.date, 16, 0 ,0); constructor () {} } [app.component.html] <ejs-timepicker [value]='dateValue' [min]='minValue' [max]='maxValue'></ejs-timepicker> Refer to the CDN link of CSS reference within the styles.css file. @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css'; Run the application with the command ng serve and a TimePicker with material theme will be displayed on the browser as follows. Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!
This Document explains how to create Essential JavaScript 2 Spreadsheet sample in Angular Spreadsheet with default material theme. Setting up new Angular project You can use Angular CLI to setup your Angular applications. Install the CLI application globally in your machine by using the below command. npm install -g @angular/cli Create a new application called “angular-spreadsheet”. ng new angular-spreadsheet Navigate to the created project folder. cd angular- spreadsheet Installing Syncfusion package Add Spreadsheet component package to the application by using the below command. [TS] npm install @syncfusion/ej2-angular-spreadsheet --save (or) npm i @syncfusion/ej2-angular- spreadsheet --save Adding Spreadsheet module After installing the package, the component modules are available to be configured in your application from the installed Syncfusion package. Import Spreadsheet module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-spreadsheet [src/app/app.module.ts]. [TS] import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule,SpreadsheetAllModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Adding CSS reference The following inbuilt material CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in “src/styles.css” using the following code. [HTML] @import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/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-lists/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css'; @import '../node_modules/@syncfusion/ej2-grids/styles/material.css'; Adding Syncfusion component Add the spreadsheet component to “app.component.ts” as follows. [TS] import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', template:'<ejs-spreadsheet> <e-sheets> <e-sheet> <e-ranges> <e-range [dataSource]="data"> </e-range></e-ranges> </e-sheet> </e-sheets> </ejs-spreadsheet>' }) export class AppComponent implements OnInit { title = 'angularSpreadsheet'; public data: Object[] = [{ OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de lAbbaye' }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48' }, { OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67' }]; ngOnInit(): void { this.data = this.data; } } Running the application in a Development server Use the following command to run the application in browser. ng serve –open The app will automatically reload if you change any of the source files. Demo Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample1540552435 Documentation Link: https://ej2.syncfusion.com/angular/documentation/spreadsheet/getting-startedConclusion I hope you enjoyed learning about how to render Angular Spreadsheet with material theme.You can refer to our Angular Spreadsheet 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 Spreadsheet 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 Document explains how to create Essential JavaScript 2 Grid sample in Angular with default material theme. Setting up new Angular project You can use Angular CLI to setup your Angular applications. Install the CLI application globally in your machine by using the below command. npm install -g @angular/cli Create a new application called “angular-grid”. ng new angular-grid Navigate to the created project folder. cd angular-grid Installing Syncfusion package Add Grid component package to the application by using the below command. npm install @syncfusion/ej2-angular-grids --save (or) npm i @syncfusion/ej2-angular-grids --save Adding Grid module After installing the package, the component modules are available to be configured in your application from the installed Syncfusion package. Import Grid module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-grids [src/app/app.module.ts]. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { GridModule } from '@syncfusion/ej2-angular-grids'; import { PageService } from '@syncfusion/ej2-angular-grids'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, GridModule ], declarations: [AppComponent], bootstrap: [AppComponent], providers: [PageService] }) export class AppModule { } Adding CSS reference The following inbuilt material CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in “src/styles.css” using the following code. @import '~@syncfusion/ej2-base/styles/material.css'; @import '~@syncfusion/ej2-buttons/styles/material.css'; @import '~@syncfusion/ej2-calendars/styles/material.css'; @import '~@syncfusion/ej2-dropdowns/styles/material.css'; @import '~@syncfusion/ej2-inputs/styles/material.css'; @import '~@syncfusion/ej2-navigations/styles/material.css'; @import '~@syncfusion/ej2-popups/styles/material.css'; @import '~@syncfusion/ej2-splitbuttons/styles/material.css'; @import '~@syncfusion/ej2-angular-grids/styles/material.css' Adding Syncfusion component Add the grid component to “app.component.ts” as follows. import { Component, OnInit } from '@angular/core'; import { data } from './datasource'; @Component({ selector: 'app-root', template: `<ejs-grid [dataSource]='data' allowPaging=true> <e-columns> <e-column field='OrderID' headerText='Order ID' textAlign='Right'></e-column> <e-column field='CustomerID' headerText='Customer ID'></e-column> <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right'></e-column> </e-columns> </ejs-grid>` }) export class AppComponent implements OnInit { public data: Object[]; ngOnInit(): void { this.data = data; } } Running the application in a Development server Use the following command to run the application in browser. ng serve --open The app will automatically reload if you change any of the source files. Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-grid-1613692127
Syncfusion provides a Material theme that can be used to create and apply the material design for WPF applications (.NET Core and also .NET Framework) using the skin manager. Also, skin manager allows to custom the primary colors, typography in few lines of code for an application or control. In addition, WPF Theme Studio can be used to create custom themes based on material design. Below are the list of four material theme variants supported for WPF. Material Light Theme Material Dark Theme Material Light Blue Theme Material Dark Blue Theme This article explains how to apply the Material Light theme to an existing WPF application. Follow the below steps to apply the material light theme and customize some parameters. Add Material Light Theme and Skin Manager NuGet packages Add the following NuGet packages to WPF application. Syncfusion.Shared.WPF Syncfusion.SfSkinManager.WPF Syncfusion.Themes.MaterialLight.WPF If you want to apply other material theme variants also by referring corresponding NuGet. Applying Material Light Theme to WPF application Themes will be applied to both Syncfusion and framework controls by using the Theme attached property of the SfSkinManager. When a theme is applied to a Window or any element, skin manager inherits the same theme to all its descendants. Code [XAML]: <Window x:Class="WPF_Material_Theme.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Credit Card Payment" xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=MaterialLight}"> </Window> Before Applying Theme After Applying Material Light Theme Customize and Register Custom Theme Settings WPF Material Light theme can be customized using the properties of MaterialLightThemeSettings. Before applying a customized theme, register it using the RegisterThemeSettings(String, IThemeSetting) method. Once registered, set the customized Material theme to the application using the SetTheme(DependencyObject, Theme) method. Code [C#]: using Syncfusion.SfSkinManager; using Syncfusion.Themes.MaterialLight.WPF; using System.Windows; using System.Windows.Media; namespace WPF_Material_Theme { public partial class MainWindow : Window { public MainWindow() { //Customizing the MaterialLight theme settings MaterialLightThemeSettings materialLightThemeSettings = new MaterialLightThemeSettings(); materialLightThemeSettings.PrimaryBackground = new SolidColorBrush(Colors.Red); materialLightThemeSettings.PrimaryForeground = new SolidColorBrush(Colors.Yellow); materialLightThemeSettings.BodyFontSize = 15; materialLightThemeSettings.HeaderFontSize = 18; materialLightThemeSettings.SubHeaderFontSize = 17; materialLightThemeSettings.TitleFontSize = 17; materialLightThemeSettings.SubTitleFontSize = 16; materialLightThemeSettings.FontFamily = new FontFamily("Callibri"); //Register the customized MaterialLight theme SfSkinManager.RegisterThemeSettings("MaterialLight", materialLightThemeSettings); //Setting the customized MaterialLight theme to the Window SfSkinManager.SetTheme(this, new Theme("MaterialLight")); InitializeComponent(); } } } After applying customized Material Light theme Sample: View sample in GitHub Conclusion This article gives a quick overview of applying a Material Light theme and customizing it. Apart from the material theme, Syncfusion also supports Office2019 and System theme with different variants, more details please refer theme list. To create a new custom theme, refer to the creating custom theme documentation. References: WPF Theme Studio WPF Themes
You can use Material effects for SfListView by Extending ItemGenerator and ListViewItem class in Xamarin.Forms. By default, the SfListView supports ripple effects for Selection and Slide swiping effect for Swiping with Material design. XAML Enable Visual as Material for Content page to enable the material effects for SfListView. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:ListViewXamarin" xmlns:sync="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms" x:Class="ListViewXamarin.MainPage" Visual="Material"> <ContentPage.BindingContext> <local:ViewModel /> </ContentPage.BindingContext> <ContentPage.Behaviors> <local:Behavior/> </ContentPage.Behaviors> <Grid RowSpacing="0" ColumnSpacing="0" Padding="0" Margin="0"> <sync:SfListView x:Name="listView" AutoFitMode="Height" ItemsSource="{Binding BookInfo}" SelectionBackgroundColor="#d3d3d3"> <sync:SfListView.ItemTemplate> <DataTemplate> <Grid Padding="0,12,8,0"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="1" /> </Grid.RowDefinitions> <StackLayout Orientation="Vertical" Padding="8,0,8,10" VerticalOptions="Start" Grid.Row="0"> <Label Text="{Binding BookName}" FontAttributes="Bold" FontSize="16" TextColor="#000000" /> <Label Text="{Binding BookAuthor}" Grid.Row="1" FontSize="14" Opacity=" 0.67" TextColor="#000000" /> <Label Text="{Binding BookDescription}" Opacity=" 0.54" TextColor="#000000" FontSize="13"/> </StackLayout> <BoxView Grid.Row="1" HeightRequest="1" Opacity="0.75" BackgroundColor="#CECECE" /> </Grid> </DataTemplate> </sync:SfListView.ItemTemplate> </sync:SfListView> </Grid> </ContentPage> C# Extend the ItemGenerator and return the customized ListViewItem based on ItemType. namespace ListViewXamarin { public class ItemGeneratorExt : ItemGenerator { public ItemGeneratorExt(SfListView listview) : base(listview) { } protected override ListViewItem OnCreateListViewItem(int itemIndex, ItemType type, object data = null) { if (type == ItemType.Record) return new ListViewItemExt(type); return base.OnCreateListViewItem(itemIndex, type, data); } } } C# Extend the ListViewItem and initialize the ListViewItemExt constructor with ItemType as parameter to enable ListViewItem Effects. namespace ListViewXamarin { public class ListViewItemExt : ListViewItem { public ListViewItemExt() { } public ListViewItemExt(ItemType type) : base(type) { } protected override void OnItemAppearing() { this.Opacity = 0; this.FadeTo(1, 400, Easing.SinInOut); base.OnItemAppearing(); } } } C# Set the instance of the ItemGeneratorExt class to the ListView.ItemGenerator property. namespace ListViewXamarin { public class Behavior : Behavior<ContentPage> { SfListView ListView; protected override void OnAttachedTo(ContentPage bindable) { ListView = bindable.FindByName<SfListView>("listView"); ListView.ItemGenerator = new ItemGeneratorExt(this.ListView); base.OnAttachedTo(bindable); } protected override void OnDetachingFrom(ContentPage bindable) { ListView = null; base.OnDetachingFrom(bindable); } } } Output Note:When EffectsView is applied to ListView by adding Visual as Material, it is necessary to initialize the EffectsViewRenderer in iOS. You can also refer to the following document link to use EffectsView in the application. https://help.syncfusion.com/xamarin/effects-view/getting-started#launching-an-application-on-each-platform-with-sfeffectsview View sample in GitHub
