EasyAngular

Create dynamic lists with ease using the easy-angular npm package. This powerful tool simplifies the process of building interactive tables. Whether you're managing dates, handling file attachments, or utilizing dropdowns, this package has you covered.

Installation

Install easy-angular package using:

$ npm install easy-angular

Usage

1. Import EasyAngularModule:

Once you have installed EasyAngularModule, you can import it in your AppModule:

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your AvatarModule
import { EasyAngularModule } from 'easy-angular';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Specify EasyAngularModule as an import
    EasyAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Start using it:

Once the EasyAngularModule is imported, you can start using the component in your Angular application:

<easy-grid-view></easy-grid-view>, <easy-input></easy-input> , <easy-drop-down></easy-drop-down>  or more...

3. How to Use Grid (easy-grid-view) :

For the Use Grid View in your project, use below selector in your HTML page.

<easy-grid-view [gridData]="gridData" [tableStyle]="'common'" [rowStyle]="''" [enableSearch]="true" [headerStyle]="''"
[isPaginationEnable]="true" [columnFilterCss]="'column-filter'"></easy-grid-view>

Selector's Parameter's explaination

• [gridData] - Object or your data, column etc.
• [tableStyle] - Class Of table / grid format
• [rowStyle] - Class of row format
• [enableSearch] - Use the common search for show data in grid
• [headerStyle] - Apply the style / class of header
• [isPaginationEnable] - Show the Pagination of Grid
• [columnFilterCss] - Add CSS for Column
• [serverSideRender] - (true / false) Grid render on server side or clint side
• (gridOption) - It's output for return with grid options like sortdirection, sort column, item per page, curent page etc.

```TypeScript
 Data Array Example :
   let i: number = 0;
   this.rowData.push({
       Id: i.toString(),
       Name: `Name ${i}`,
       Designation: `Designation ${i}`,
       Department: `Department ${i}`,
       Expertise: `Expertise ${i}`,
       Experience: `${i} years`,
       Skills: {  // For click on cell Icon
         text: `Skills ${i}`,
         icon: '<span class="material-icons-outlined badge-success cursor-pointer"><i class="fa fa-trash"></i></span>',
         click: () => this.onSkillsClick(i)
       },
       CTC: { // For Click on cell text
         text: `${i}`,
         click: () => this.onSkillsClick(i)
       },
       Remarks: `Remarks ${i}`,
     });

Code scaffolding

Run ng generate component component-name --project EasyAngular to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project EasyAngular.

Note: Don't forget to add --project EasyAngular or else it will be added to the default project in your angular.json file.

Build

Run ng build EasyAngular to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build EasyAngular, go to the dist folder cd dist/easy-angular and run npm publish.

Running unit tests

Run ng test EasyAngular to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.