ANGULAR 5 RESPONSIVE LAYOUT INSTALL
ANGULAR 5 RESPONSIVE LAYOUT UPDATE
ANGULAR 5 RESPONSIVE LAYOUT FREE

Input ( ) draggable: boolean = true /** Whether the item is resizable or not. Input ( ) minW?: number Input ( ) minH?: number Input ( ) maxW?: number Input ( ) maxH?: number /** Whether the item is draggable or not. Any of these would 'override' the min/max values specified in the layout.

Input ( ) id: string /** Min and max sizes of the grid item. Handy when using no compaction Input ( ) preventCollision = false /** Emits when layout change Output ( ) layoutUpdated: EventEmitter = new EventEmitter ( ) /** Emits when drag starts Output ( ) dragStarted: EventEmitter = new EventEmitter ( ) /** Emits when resize starts Output ( ) resizeStarted: EventEmitter = new EventEmitter ( ) /** Emits when drag ends Output ( ) dragEnded: EventEmitter = new EventEmitter ( ) /** Emits when resize ends Output ( ) resizeEnded: EventEmitter = new EventEmitter ( ) /** Emits when a grid item is being resized and its bounds have changed Output ( ) gridItemResize: EventEmitter = new EventEmitter ( ) KtdGridItem Input ( ) compactOnPropsChange = true /** If true, grid items won't change position when being dragged over.

ANGULAR 5 RESPONSIVE LAYOUT UPDATE

Input ( ) scrollSpeed: number = 2 /** Whether or not to update the internal layout when some dependent property change. Input ( ) scrollableParent: HTMLElement | Document | string | null = null /** Number of CSS pixels that would be scrolled on each 'tick' when auto scroll is performed. * If no data provided or null autoscroll is not performed. If an string is provided it would search that element by id on the dom. * Input ( ) height: number | null = null /** * Parent element that contains the scroll. * If height is null, height will be automatically set according to its inner grid items. Input ( ) layout: KtdGridLayout /** Grid gap in css pixels Input ( ) gap: number = 0 /** * If height is a number, fixes the height of the grid to it, recommended when rowHeight = 'fit' is used. Array of all the grid items with its 'id' and position on the grid. Input ( ) rowHeight: number | 'fit' = 100 /** Number of columns Input ( ) cols: number = 6 /** Layout of the grid. If 'fit' value is set, a 'height' should be also provided. * if rowHeight is 'fit', it means that rows will fit in the height available. * If rowHeight is a number value, it means that each row would have those css pixels in height. Defaults to 'vertical' Input ( ) compactType: KtdGridCompactType = 'vertical' /** * Row height as number or as 'fit'. ** Type of compaction that will be applied to the layout (vertical, horizontal or free).

ANGULAR 5 RESPONSIVE LAYOUT INSTALL

To use in your project install it via npm:

ANGULAR 5 RESPONSIVE LAYOUT FREE

3 modes of grid compaction: vertical, horizontal and free (exact same algorithm as React-Grid-Layout).

It can be considered a 'port' (with some changes) to the Angular ecosystem. Its core functionalities are based in the well known React-Grid-Layout library. It is mainly designed to create highly customizable dashboards. Angular Grid Layout is a grid layout system with draggable and resizable items for Angular Applications.

Angular 5 responsive layout