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| iftruethe element is hidden on devices have screen size of less than equal to **576px** | __ngHideMd__ |boolean| iftruethe element is hidden on devices have screen size greatar **576px** and less than equal **768px** | __ngHideLg__ |boolean| iftruethe element is hidden on devices have screen size greatar **768px** and less than equal **1200px** | __ngHideXl__ |boolean| iftrue` 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 { }