igniteui-angular

Ignite UI for Angular - from Infragistics

Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular by Infragistics. Ignite UI for Angular is designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.

You can find source files under the src folder, including samples and tests.

View running samples here

IMPORTANT The repository has been renamed from igniteui-js-blocks to igniteui-angular. Read more on our new naming convention.

Current list of controls include:

Components	Status	Docs		Directives	Status	Docs
avatar	Available	Readme		button	Available	Readme
badge	Available	Readme		filter	Available	Readme
carousel	Available	Readme		ripple	Available	Readme
list	Available	Readme		input	Available	Readme
navbar	Available	Readme		label	Available	Readme
tabbar	Available	Readme		layout	Available	Readme
dialog	Available	Readme
snackbar	Available	Readme
toast	Available	Readme
navigation drawer	Available	Readme
radio	Available	Readme
checkbox	Available	Readme
switch	Available	Readme
scroll	Available	Readme
linear progress	Available	Readme
circular progress	Available	Readme
icon	Available	Readme
card	Available	Readme
grid	Available	Readme
slider	Available	Readme
calendar	Available	Readme
buttonGroup	Available	Readme
dataContainer	Available	Readme
dataUtil	Available	Readme
datePicker	Available	Readme

Setup

From the root folder run:

npm install

Getting Started with 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

Build Library

In case your editor cannot auto-compile the TypeScript files (VS, VS Code, others with plugins) there's a configured npm command in place to run the compiler:

For both ESM and UMD builds

npm run build
npm run build:watch // run in watch mode

ESM build only

npm run build:esm
npm run build:esm:watch // run in watch mode

UMD build only

npm run build:umd
npm run build:umd:watch // run in watch mode

Run Demos

The demos directory contains a sample application showcasing the components and directives of the library. If you want to run the application make sure to install the application dependencies:

cd demos && npm install

Run the following command from the root directory of your repository. This will open the demos application in your preferred browser. Any changes in the application code will trigger a rebuild of the application.

npm run start:demos

In case you want to explore/experiment with the library code start the demo application with:

npm run start:dev

It will watch both the src and demos directories and will rebuild both the library and the application.

NPM Package

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

npm install igniteui-angular --save-dev

Contributing

Coding Guidelines

General Naming Guidelines

Quickstart App

Ignite UI for Angular Quickstart app This repository is a fork of the Angular QuickStart Source and has been updated to demonstrate how to include and use components from Ignite UI for Angular. It basically follows the shortest path to bootstrap writing the application with Ignite UI for Angular:

• Fork the the angular quickstart
• Install Ignite UI for Angular from npm using npm install igniteui-angular --save-dev
• Update the views with sample Ignite UI for Angular controls.

Demo Apps & Documentation

The Warehouse Picklist App demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.

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 Prioroty Support, please visit this page.

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

Infragistics is only successful if you are successful, if you need additional assitance beyond our help documentation, forums or Prioroty Support, we have a full suite of Services offerings, including Angular Training, Application Architecture and Development and full Design Consultation. Click to learn more about our Services offerings.

License

This project is released under the Apache License, version 2.0. This is a commercial product, requiring a valid paid-for license for commercial use. This product is free to use for non-commercial applications, like non-profits and educational usage.

To acquire a license for commercial usage, please register for a trial and acquire a license at Infragistics.com/Angular.

© Copyright 2017 INFRAGISTICS. All Rights Reserved. The Infragistics Ultimate license & copyright applies to this distribution. For information on that license, please go to our website here.

Changelog

15.1.0

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid:

  • GroupMemberCountSortingStrategy is added, which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
  • A new argument primaryKey has been introduced to IRowDataEventArgs Interface and part of the event arguments that are emitted by the rowAdded and rowDeleted events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined.
  • Added the autoGenerateExclude property that accepts an array of strings for property names that are to be excluded from the generated column collection

• IgxColumnComponent

  • Added currRec and groupRec parameters to the groupingComparer function that give access to the all properties of the compared records.

• IgxOverlayService

  • A new event contentAppending is introduced - the event is emitted before the content is appended to the overlay. The event is emitted with OverlayEventArgs arguments and is not cancellable.

• IgxCard

  • Buttons and icons slotted in the igx-card-actions can now be explicitly arranged to the start/end of the layout. To position components on either side users can take advantage of the newly added directives: igxStart - aligns items to the start and igxEnd - aligns items on the end of the card actions area.

  • The reverse property has been deprecated and will be removed in a future version.

  • Code example:

  <igx-card>
      <igx-card-header>
          <h3>Title</h3>
      </igx-card-header>
      <igx-card-content>
          Card Content
      </igx-card-content>
  
      <!-- Rearrange items using igxStart and igxEnd directives -->
      <igx-card-actions>
          <igx-icon igxStart>drag_indicator</igx-icon>
          <button igxButton="icon" igxStart>
              <igx-icon>favorite</igx-icon>
          </button>
          <button igxButton igxEnd>Button</button>
      </igx-card-actions>
  </igx-card>
  

• IgxButtonGroup:

  • The selected and deselected events are now cancellable.

General

• IgxPivotGrid
  • The IgxPivotDateDimension properties inBaseDimension and inOption have been deprecated and renamed to baseDimension and options respectively.
• IgxGrid
  • Breaking Change The onGroupingDone output has been renamed to groupingDone to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update.
  • Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
• DisplayDensity
  • Breaking Change The onDensityChanged output has been renamed to densityChanged to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on ng update.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Breaking Change - rowSelectionChanging event arguments are changed. Now the oldSelection, newSelection, added and removed collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. When the grid is working with remote data and a primary key has been set- for the selected rows that are not currently part of the grid view, will be emitted a partial row data object.
  • Behavioral Change - When selected row is deleted from the grid component rowSelectionChanging event will no longer be emitted.
• IgxCarousel
  • Breaking Change The onSlideChanged, onSlideAdded, onSlideRemoved, onCarouselPaused and onCarouselPlaying outputs have been renamed to slideChanged, slideAdded, slideRemoved, carouselPaused and carouselPlaying to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update.
• IgxRadio, IgxRadioGroup, IgxCheckbox, IgxSwitch
  • Added component validation along with styles for invalid state
• igxMask directive
  • Added the capability to escape mask pattern literals.
• IgxBadge
  • Added shape property that controls the shape of the badge and can be either square or rounded. The default shape of the badge is rounded.
• IgxAvatar
  • Breaking Change The roundShape property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added shape attribute that can be square, rounded or circle. The default shape of the avatar is square.
• IgxOverlayService
  • attach method overload accepting ComponentFactoryResolver (trough NgModuleRef-like object) is now deprecated in line with API deprecated in Angular 13. New overload is added accepting ViewComponentRef that should be used instead.
• Breaking Changes - $label-floated-background and $label-floated-disabled-background properties of IgxInputGroupComponent theme has been removed.
• IgxInputGroupComponent The input group has been refactored so that the floating label for the input of type="border" does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
• Breaking Changes - $size property of scrollbar-theme theme has been renamed to $scrollbar-size.
• IgxSimpleCombo
  • The IgxSimpleCombo will not open its drop-down on clear.