ng-angular-grid

ng-angular-grid is a grid system similar to the one that bootstrap uses,the main purpose of creating of this library was so that it can be used as an alternaitve for styling libraries which have a poor or complicated grid system

Installation

npm install ng-angular-grid

Demo

A Demo containing the container,row and column functonality can be found here

Import

import { NgAngularGridModule } from "ng-angular-grid";
@NgModule({
  declarations: [...],
  imports: [
    ...
    NgAngularGridModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Container

ng-grid-container is used to add padding, contain and align your content according to the device. By Default the ng-grid-container component has a margin-left and margin-right of 15px but this can be removed by using ngFluid parameter.

Name	Type	Description
ngFluid	boolean	if true the margin from the left and right is set to 0

By Default the ngFluid is false

<ng-grid-container [ngFluid]="true">
 Container with no margin from left and right
</ng-grid-container>

Row

ng-grid-row component is used to create a horizontal group of columns. The ng-grid-column component must be an immediate children of the this component.

By default the ng-grid-row component has a gutter size of -15px but this can be removed by using ngNoGutters parameter

Name	Type	Description
ngNoGutters	boolean	if true the margin left and right of ng-grid-row will be removed, furthermore the padding left and right of ng-grid-column will also be removed

Column

In ng-angular-grid the screen is divided into 12 vertical sections. You can sepcify how many vertical sections you want each column to have by passing Col paramater into ng-grid-column component.

<ng-grid-container>
    <ng-grid-row >
        <ng-grid-column [Col]="6">1st Column</ng-grid-column>
        <ng-grid-column [Col]="6">2nd Column</ng-grid-column>
    </ng-grid-row>
</ng-grid-container>

You can sepecify the vertical sections based on the screen size as well by using the following parameters

Name	Type	BreakPoints
Col	number	All
ColXL	number	≥ 1200px
ColLg	number	≥ 992px
ColMd	number	≥ 768px
ColSm	number	≥ 576px

<ng-grid-container>
    <ng-grid-row >
        <ng-grid-column [ColLg]="4" [ColMd]="6" [ColSm]="12">
            1st Column
        </ng-grid-column>
        <ng-grid-column [ColLg]="4" [ColMd]="6" [ColSm]="12">
            2nd Column
        </ng-grid-column>
    </ng-grid-row>
</ng-grid-container>

Common Parameters

These Parameters can be used with all of the components

The margin and padding have a default Unit of rem

Name	Type	Description
ngMargin	number	Margin from all sides
ngMarginTop	number	Margin from Top
ngMarginRight	number	Margin from Right
ngMarginBottom	number	Margin from the Bottom
ngMarginLeft	number	Margin from the Left
ngPadding	number	Margin from all sides
ngPaddingTop	number	Margin from Top `
ngPaddingRight	number	Margin from Right
ngPaddingBottom	number	Margin from the Bottom
ngPaddinginLeft	number	Margin from the Left
ngHideSm	boolean	if true the element is hidden on devices have screen size of less than equal to 576px
ngHideMd	boolean	if true the element is hidden on devices have screen size greatar 576px and less than equal 768px
ngHideLg	boolean	if true the element is hidden on devices have screen size greatar 768px and less than equal 1200px
ngHideXl	boolean	if true the element is hidden on devices have screen size greatar than 1200px

Advanced

When importing you can provide two parameters to the NgAngularGridModule specifing the Unit of the padding and margin

Name	Type
paddingUnit	string
marginUnit	string

Allowed Unit types are

mm|cm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%

import {NgAngularGridModule} from "ng-angular-grid";
@NgModule({
  declarations: [...],
  imports: [
    NgAngularGridModule.forRoot({
        paddingUnit:"px",
        marginUnit:"px"
    })
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }