Loading repository data…

Syncfusion-angular4-ui-components GitHub Details, Stars and Alternatives | OpenRepoFinder

SyncfusionExamples / repository

Syncfusion-angular4-ui-components

Syncfusion Angular4 UI Components is a collection of modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular and touch friendly.

#angular-components#aot-compilation#grid#tree-shakingArchived

View Repository on GitHub ↗

REPOSITORY OVERVIEW

Live repository statistics

★ 2Stars

⑂ 2Forks

◯ 0Open issues

◉ 2Watchers

8/100

OPENREPOHUB HEALTH SIGNAL

Limited signals

A transparent discovery signal based on current public GitHub metadata.

Recent activity35% weight

Community adoption25% weight

Maintenance state20% weight

License clarity10% weight

Project information10% weight

This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.

README preview

Syncfusion - angular 4 ui component

Setting up an angular project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli@1.2.0

Create a new application

ng new angular-app

By default, it installs the CSS style base application. To setup with SCSS, pass --style=SCSS argument on create project.

Example code snippet.

ng new angular-app --style=scss

Navigate to the created project folder.

cd angular-app

Installing Syncfusion grid package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the angular syncfusion package from npm link.

Add @syncfusion/ej2-angular-grids package to the application.

npm install @syncfusion/ej2-angular-grids --save
(or)
npm i @syncfusion/ej2-angular-grids --save

Installing Syncfusion grid package with Custom Tagname

You can also change the tag name of Syncfusion Angular UI Controls.

Run the below command to add @syncfusion/ej2-angular-grids package to the application with the desired tag name custom.

SET tagName=custom && npm install @syncfusion/ej2-angular-grids

After executing the above command, the Syncfusion Angular UI component selector will be changed. For example, the tag name of <ejs-grid> will be changed into <custom-grid>.

Adding Grid module

After installing the package, the component modules are available to configure into your application from the installed syncfusion package. Syncfusion Angular package provides two different types of ngModules.

Refer to to learn about .

Ng-Module

ngModules

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PageService,
                SortService,
                FilterService,
                GroupService]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {

    public data: Object[];

    ngOnInit(): void {
        this.data = data;
    }
}

@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';