Coder Social home page Coder Social logo

igniteui / igniteui-angular Goto Github PK

View Code? Open in Web Editor NEW
562.0 61.0 158.0 184.25 MB

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components with the fastest grids and charts, Pivot Grid, Dock Manager, Hierarchical Grid, and more.

Home Page: https://www.infragistics.com/products/ignite-ui-angular

License: Other

TypeScript 87.58% CSS 0.04% HTML 5.56% JavaScript 0.26% PowerShell 0.02% SCSS 6.53%
angular typescript ui-components infragistics angular-components igniteui progressive-web-apps angular-charts angular-datatable angular-grid

igniteui-angular's Introduction

ignite-ui-logo-flames

Ignite UI for Angular - from Infragistics

Node.js CI Build Status Coverage Status npm version Discord

Ignite UI for Angular is a complete library of Angular-native, Material-based Angular UI components designed to enable developers to build enterprise-ready HTML5 & JavaScript apps for modern desktop browsers. It packs full-featured components, including Pivot Grids, Dock Manager, Hierarchical Grid, Bottom Navigation, etc., 60+ high-performance Angular Charts for all business needs and any app scenario, and more.

You can find source files under the src folder, including samples and tests. Or visit Ignite UI for Angular Discord and join the dev community there.

Contributing

There are many ways in which you can participate in this project, for example:

Feedback

Browser Support

chrome firefox edge opera safari ie
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11*

* IE 11 is only supported in Ignite UI for Angular < 13.0.0

Overview

Angular Data Grid

The Ignite UI for Angular Data Grid equips you with all the necessary features for manipulating and visualizing tabular data in a series of rows and columns with ease. You can find powerful grid elements for no-lag scrolling while rendering and going through millions of data points.

Built for optimization and speed, our Angular grid component lets you quickly bind data with very little code and allows you to implement a variety of events in order to tailor different behaviors.

Angular Charts & Graphs

Ignite UI for Angular arrives with an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your modern web and mobile apps. All of them are designed to work flawlessly on every modern browser and provide complete touch as well as interactivity. Our comprehensive Angular Charts component supports more than 65 chart types that let you display all sorts of data representations and statistics. And with the rich and easy-to-use API, you can plot various types of charts.

Some of the Angular chart types included are: Polar chart, Pie chart, Donut chart, Bubble chart, Area chart, Treemap chart, and many others. And if you look for Angular financial charts, with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts.

Current List of Components Include:

Components Status Added in Directives Status Added in
accordion Readme Docs 12.1.0 autocomplete Readme Docs 7.1.0
avatar Readme Docs 2.0.0 button Readme Docs 2.0.0
badge Readme Docs 2.0.0 date time editor Readme Docs 9.1.0
banner Readme Docs 7.0.2 divider Readme Docs 7.2.5
bottom navigation Readme Docs 2.0.0 dragdrop Readme Docs 5.2.0
button group Readme Docs 5.1.0 filter Readme Docs 2.0.0
calendar Readme Docs 5.1.0 focus-trap Readme Docs 13.0.0
card Readme Docs 5.1.0 forOf Readme Docs 5.2.0
carousel Readme Docs 2.0.0 hint Readme Docs 5.3.0
checkbox Readme Docs 2.0.0 input Readme Docs 2.0.0
chips Readme Docs 6.1.0 label Readme Docs 2.0.0
circular progress Readme Docs 5.1.0 layout Readme Docs 2.0.0
combo Readme Docs 6.1.0 mask Readme Docs 5.3.0
date picker Readme Docs 5.3.0 prefix Readme Docs 5.3.0
date range picker Readme Docs 9.1.0 radio-group Docs 6.0.4
dialog Readme Docs 2.0.0 ripple Readme Docs 2.0.0
dock manager Docs 9.1.0 suffix Readme Docs 5.3.0
drop down Readme Docs 6.1.0 text-highlight Readme Docs 6.0.0
expansion panel Readme Docs 6.2.0 toggle Readme Docs 6.2.0
grid Readme Docs 5.1.0 tooltip Readme Docs 6.2.0
hierarchical grid Readme Docs 7.2.0 Others Status
icon Readme Docs 2.0.0 Animations Readme 2.0.0
input group Readme Docs 5.3.0 dataUtil Readme 5.1.0
linear progress Readme Docs 5.1.0 dataContainer Readme 5.1.0
list Readme Docs 2.0.0 IgxGridState Readme Docs 9.0.0
month picker Readme Docs 7.2.0
navbar Readme Docs 2.0.0
navigation drawer Readme Docs 2.0.0
pivot grid Readme Docs 13.1.0
query builder Readme Docs 14.2.0
radio Readme Docs 2.0.0
rating Docs 14.1.0
select Readme Docs 5.3.0
simple-combo Readme Docs 13.0.0
slider Readme Docs 5.1.0
snackbar Readme Docs 5.1.0
stepper Readme Docs 13.0.0
switch Readme Docs 2.0.0
tabs Readme Docs 5.1.0
time picker Readme Docs 5.3.0
toast Readme Docs 5.1.0
tree Readme Docs 12.0.0
tree grid Readme Docs 6.2.0

Release History

Ignite UI for Angular Release date
4.0.0 18-April-17
4.1.0 12-May-17
4.2.0 20-Jul-17
5.0.0 03-Nov-17
5.1.0 17-Jan-18
5.2.0 23-Feb-18
5.3.0 24-Apr-18
6.0.0 21-May-18
6.1.0 05-Jul-18
6.2.0 05-Nov-18
7.0.0 26-Nov-18
7.1.0 13-Dec-18
7.2.0 08-Mar-19
7.3.0 13-May-19
8.0.0 19-Jun-19
8.1.0 22-Jul-19
8.2.0 26-Sep-19
9.0.0 11-Feb-20
9.1.0 01-Jun-20
10.0.0 25-Jun-20
10.1.0 12-Aug-20
10.2.0 20-Oct-20
11.0.0 13-Nov-20
11.1.0 17-Feb-21
12.0.0 14-May-21
12.1.0 02-Aug-21
12.2.0 04-Oct-21
13.0.0 23-Nov-21
13.1.0 02-Mar-22
13.2.0 25-May-22
14.0.0 09-Jun-22
14.1.0 13-Sep-22
14.2.0 06-Oct-22
15.0.0 23-Nov-22
15.1.0 27-Mar-23
16.0.0 15-May-23
16.1.0 02-Oct-23
17.0.0 09-Nov-23
17.1.0 26-Feb-24

Components available in igniteui-angular-charts

Components
Bar Chart Docs
Line Chart Docs
Financial Chart Docs
Doughnut Chart Docs
Pie Chart Docs

Components available in igniteui-angular-gauges

Components
Bullet Graph Docs
Linear Gauge Docs
Radial Gauge Docs

Components available in igniteui-angular-excel

Components
Excel Library Docs

Components available in igniteui-angular-spreadsheet

Components
Spreadsheet Docs

Setup

From the root folder run:

npm install

Create new Project with Ignite UI CLI

To get started with the Ignite UI CLI and Ignite UI for Angular:

npm i -g igniteui-cli
ig new <project name> --framework=angular
cd <project name>
ig add grid <component name>
ig start

Adding IgniteUI for Angular to Existing Project

Including the igniteui-angular and igniteui-cli packages to your project:

ng add igniteui-angular

After this operation you can use the Ignite UI CLI commands in your project, such as ig and ig add. Learn more

Updating Existing Project

Analyze your project for possible migrations:

ng update

If there are new versions available, update your packages:

ng update igniteui-angular
...
ng update igniteui-cli

Building the Library

// build the code
ng build igniteui-angular

// build the css
npm run build:styles

// build them both
npm run build:lib

You can find the build output under dist/igniteui-angular.

Running the tests

Running the tests in watch mode:

ng test igniteui-angular // or npm run test:lib:watch

Running the tests once with code coverage enabled:

npm run test:lib

Building the API Docs

The API docs are produced using TypeDoc and SassDoc. In order to build the docs, all you need to do is run:

npm run build:docs

The output of the API docs build is located under dist/igniteui-angular/docs.

Run Demos Application

The repository includes a sample application featuring the showcasing the different components/directives. In order to run the demo samples, build the library first and start the application.

npm start

NOTE: Experimental demos are not always stable.

NPM Package

You can include Ignite UI for Angular in your project as a dependency using the NPM package.

npm install igniteui-angular

Contributing

General Naming and Coding Guidelines for Ignite UI for Angular

Demo Apps & Documentation

List of Angular Demo Apps

  • Warehouse Picklist App - Demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.

  • FinTech Grid App - The Ignite UI for Angular Grid component is able to handle thousands of updates per second, while keeping the grid responsive for any interaction that the user may undertake. This sample demonstrates the Angular Grid handling thousands of updates per second.

  • FinTech Tree Grid App - The Ignite UI for Angular Tree Grid component is able to handle thousands of updates per second, while keeping the grid responsive for any interaction that the user may undertake. This sample demonstrates the Tree Grid handling thousands of updates per second.

  • Crypto Portfolio App - This is a web and mobile application, developed with Ignite UI for Angular components and styled with our one of a kind theming engine.

  • Task Planner Application – Task Planner is an Angular web application. It provides an effective means for managing projects and related tasks. Thus, it loads data from the Web API endpoint, enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. It shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.

  • Dock Manager with Data Analysis Tool - The Data Analysis sample application provides users with the flexibility to customize the data visualization using one of several chart types. Built with Angular UI components, it showcases the Angular Data Grid integrated with an Angular Data Chart, Angular Pie Chart, and an Angular Category Chart, to provide an interactive and engaging visualization. The Dock Manager web component provides a windowing experience, allowing users to customize the layout and view, and make the data more accessible.

  • COVID-19 Dashboard - This dynamic dashboard was built using Indigo.Design and Ignite UI for Angular leveraging timely reports data from CSSEGISandData/COVID-19 to create an useful and impactful visualization. Built in a matter of hours, it showcases the Ignite UI Category and Data Charts, Map and List components for Angular and the how easy it is to get those quickly configured and populated with data.

  • Inventory Management App - The Inventory Management App consists of 2 pages: The Products Page and the Dashboard Page. The Products Page contains a grid with product information and includes a number of useful features

Angular apps with ASP.NET Core Web Application

If you consider Angular client side application with ASP.NET Core application you can check out our ASP.NET-Core-Samples

Documentation

To get started with the Data Grid, use the steps in the grid walk-through.

All help, related API documents and walk-throughs can be found for each control here.

Roadmap

Roadmap document

Support

Developer support is provided as part of the commercial, paid-for license via Infragistics Forums, or via Chat & Phone with a Priority Support license. To acquire a license for paid support or Priority Support, please visit this page.

Community support for open source usage of this product is available at StackOverflow.

License

This is a commercial product, requiring a valid paid-for license for commercial use. This product is free to use for non-commercial educational use for students in K through 12 grades or University programs, and for educators to use in a classroom setting as examples / tools in their curriculum. In order for us to verify your eligibility for free usage, please register for trial and open a support ticket with a request for free license.

To acquire a license for commercial usage, please register for trial and refer to the purchasing options in the pricing section on the product page.

© Copyright 2020 INFRAGISTICS. All Rights Reserved. The Infragistics Ultimate license & copyright applies to this distribution. For information on that license, please go to our website https://www.infragistics.com/legal/license.

igniteui-angular's People

Contributors

3phase avatar aleksandyr avatar bazal4o avatar chronossf avatar damyanpetev avatar ddavidkov avatar ddincheva avatar diyandimitrov avatar dkamburov avatar gedinakova avatar hanastasov avatar igdmdimitrov avatar ivaylog avatar jackofdiamond5 avatar kdinev avatar lipata avatar mayakirova avatar mddragnev avatar mpavlinov avatar nrobakova avatar rkaraivanov avatar sandreeva avatar simeonoff avatar sisivanova avatar skrustev avatar sstoyanovig avatar tachojelev avatar viktorslavov avatar wnvko avatar zdrawku avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

igniteui-angular's Issues

Implement View loading in the tab component

The tab should act like a navigation component in Android. It should support loading of different Views.

The syntax should be something of the sort:

<ig-tab-bar alignment="bottom"> 
  <ig-tab label="Home" href="#/Home" src="template_folder/template1.html" icon="home-icon-css-class"> 
  </ig-tab> 
  <ig-tab label="About" href="#/about" src="template_folder/template2.html" icon="about-icon-css-class"> 
  </ig-tab> 
</ig-tab-bar>

We can discuss the src attribute, it could be named something else, or we can create a view component that goes inside the tab and carries the src. This is just a brainstorm, so we can discuss this further.

Transition animations to the Angular animation framework

We currently have custom animations which were implemented before the angular animations framework. The current promise callback with our animations is unreliable, so it's time to move our animations to the angular animations framework.

Currently there are custom animations in:

  1. Navigation Drawer

Theme

Create a theme for zero blocks which is aligned with Angular 2 and follows material design principles.
Have the theme take care of components only with CSS such as:

Create the overall structure of the theme. Look and feel of the default theme may change at a later stage.

List drill down

Extend the list to support list-details drill down.

Upon a list item click (tap), the list should be able to transition (drill down) to a new view, which carries details for the specific item.

The transition will happen as a drill down in the case of a phone view.
The details item can be drilled down, or loaded in a separate container in the case of a tablet view.

Implement angular 2 new naming conventions

General Naming Guidelines

  • Implement 'igx' as a selector prefix (dash separator)
  • Naming: follow a pattern that describes the symbol's feature then its type. The recommended pattern is feature.type.ts (badge.component.ts)
  • Use dashes to separate words in the descriptive name. (Separate File Names with Dots and Dashes)
  • Use upper camel case for class names (export class IgxAvatar)
  • Add 'Igx' prefix to class names (export class IgxAvatar)
  • Do use consistent names for all pipes, named after their feature
  • Do name test specification files the same as the component they test (with a suffix of .spec; Example: badge.component.spec.ts)
  • Prefixes for Directives -
    @directive({
    selector: '[igxLabel]'
    })

Coding Conventions:

  • use upper camel case when naming classes and interfaces (exceptionService to ExceptionService )
  • Do use lower camel case to name properties and methods
  • Use underscore for private properties (private _size: string)

Icon - CSS component + Icon set

Develop an icon set that will be used by Zero Blocks components, as well as general icons for web.

We will also need an icon component, which should be a CSS component.

  • Component
  • Icon set

Zero Blocks visual identity

Creating a visual identity for Zero Blocks:

  1. Create logo
  2. Define visual identity style (styleguide):
    A. imagery use (overlays, masking shapes, etc)
    B. fonts (used for websites and promo materials)
    C. colors (define base colors and color scheme)
    D. define iconography styles (round/edgy/mixed/lines/filled)

Setup a build task

There should be npm scripts that produce combined files.
There should be a build setup to run with every commit.

Navigation bar - new component

The navigation bar component should tap into the navigation stack of Angular. It should expose back button upon navigation, and interacting with the back button should pop from the navigation stack and transition the application back a view.

The navigation bar should also hold a title and an icon.

Tab - new component

Create a tab component.

  • Tab contents within the same view
  • Tab contents within separate views
  • Unit tests

Badge Position Property

Allow badge positioning by providing values for position.
@Property {string} position

Valid positions:
top-left
top-right
bottom-left
bottom-right

Warehouse application

Build a POC warehousing application using Angular and Zero Blocks.

Design will be included to the issue.

Component styling

Currently the component styling is provided inside the component definitions and the styles are provided in a string format. We should provide general theming capabilities for Zero Blocks.

  1. Remove style definitions from the components.
  2. Implement theming for the components.
  3. Setup build to produce combined styles.

List search API

Create a search API for the list and a demo which displays how entering symbols in a search box (input), the list is searched by:

  1. Text in the DOM elements.
  2. Text in a specific DOM element. This should be configurable through the list.
  3. Data items the list is bound to. The list should be configurable by what property to search for in the data items.

In addition, this will probably be an enhancement to the nav bar where a search box for the list can be configured.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.