Ng2-adasia-common NPM

ng2-adasia-common

An implementation of Libraries for Adasia

Installation

First you need to install the npm module:

npm install

Usage

1. To use common components

We need to import css first

node_modules/ng2-adasia-common/ng2_adasia_components/css/progress.css

1/ Progress spinner

** Import AdasiaComponentModule to your module

import { MatProgressBarModule, MatProgressSpinnerModule } from '@angular/material';
import { AdasiaComponentModule } from 'ng2-adasia-common/ng2_adasia_components';

** To use progress spinners, add this snippet to html where you want to show progress spinner

<app-progress-spinners  [mode]='' [strokeWidth]='' [value]='' [color]='' [diameter]='' ></app-progress-spinners>

mode can be 'determinate' | 'indeterminate'
strokeWidth is a number
value is number. It is used when mode is determinate
diameter is number
color can be 'primary' | 'accent' | 'warn'

** To easiser to use you should import ProgressSpinnerModel object and pass it to these inputs

import { ProgressSpinnerModel } from 'ng2-adasia-common/models/ProgressSpinnerModel';

Init ProgressSpinnerModel in component file
Binding ProgressSpinnerModel to those inputs above

*** Override color for all progress

Whenever you wanna change or create more colors, you only need pass input color to any variable you want

.mat-progress-bar.mat-[color] .mat-progress-bar-fill::after {
  background-color: #ff4081;
}

.mat-progress-bar.mat-[color] .mat-progress-bar-buffer {
  background-color: #ff80ab;
}

2/ Progress top

** Import AdasiaComponentModule to your module

import { AdasiaComponentModule } from 'ng2-adasia-common/ng2_adasia_components';

** Usage

<app-progress-top [color]='' [mode]='' [bufferValue]='' [value]='' [isHidden]=''></app-progress-top>

color can be 'primary' | 'accent' | 'warn'
mode can be 'determinate' | 'indeterminate' | 'buffer' | 'query'
bufferValue is a number
value is number. It is used when mode is determinate
isHidden whenever you want it show or hide

** To easiser to use you should import

import { ProgressTopModel } from 'ng2-adasia-common/models/ProgressTopModel';

Init ProgressTopModel in component file
Binding ProgressTopModel to those inputs above

*** Override color for all progress

Whenever you wanna change or create more colors, you only need pass input color to any variable you want

.mat-progress-spinner.mat-[color] circle{
  stroke:#2d8bf7;
}

2. To use common pipes

1/ Gender pipe

** Import AdasiaComponentModule to your module

import { AdasiaPipeModule } from 'ng2-adasia-common/ng2_adasia_pipes';

** In this module we can use gender, groupby and shortennumber

** Gender pipe usage

{{'gender'|gender}}

gender can be '1' or '2' or 1 or 1
1 is 'Female' 2 is 'Male'

** Groupby pipe usage

*ngFor="let item of list|groupBy"

** Shorten number pipe usage

{{number|shortenNumber}}

4. To use common services

** Set up your project 1/ Create file config.json and put it into assets folder 2/ In config.json file you need to declare any static value you wanna config without deploy in the future

{
  "prod": {
  	"applicationName": "Casting Adasia",
    "apiUrl": "https://openwhisk.ng.bluemix.net/api/v1/namespaces/",
    "url":"http://influencer.casting-asia.com/",
    "namespace":"AdAsia%20Holdings%20Pte.%20Ltd._AdAsia%20Holdings%20Pte.%20Ltd.",
    "twitterLoginAPI":"http://35.197.182.209/social-media-api/twitter/login.php?redirect_uri=",
    "castingAsiaAPIUrl":"http://dev.casting-asia.com:3001/"
  },
  "dev":{
    "applicationName": "Casting Adasia",
    "apiUrl": "https://openwhisk.ng.bluemix.net/api/v1/namespaces/",
    "url":"http://localhost:4200/",
    "namespace":"AdAsia%20Holdings%20Pte.%20Ltd._staging",
    "twitterLoginAPI":"http://35.197.182.209/social-media-api/twitter/login.php?redirect_uri=",
    "castingAsiaAPIUrl":"http://35.194.112.46:3001/"
  },
  "stag":{
    "applicationName": "Casting Adasia",
    "apiUrl": "https://openwhisk.ng.bluemix.net/api/v1/namespaces/",
    "url":"http://ca-influencer-dev.adasia.biz/",
    "namespace":"AdAsia%20Holdings%20Pte.%20Ltd._staging",
    "twitterLoginAPI":"http://35.197.182.209/social-media-api/twitter/login.php?redirect_uri=",
    "castingAsiaAPIUrl":"http://35.194.112.46:3001/"
  },
  "version":"1.1.1"
}

3/ In the enviroment folder you need to create staging environment

environment.prod.ts
environment.staging.ts
environment.prod.ts

4/ You need to set envName for each file above

export const environment = {
  production: true,
  envName: 'prod'
};
export const environment = {
  production: true,
  envName: 'stag'
};
export const environment = {
  production: true,
  envName: 'dev'
};

5/ Import Serivce Module

** Import AdasiaServiceModule to your module

import { AdasiaServiceModule } from 'ng2-adasia-common/ng2_adasia_services';

All services in asia service have been declared provider, you dont need to declare provider anymore

6/ Array service usage

** Inject array service which is you gonna use

import { BaseHttp } from 'ng2-adasia-common/ng2_adasia_services/services';

constructor(private _baseHttp:BaseHttp){
}

*** Incase you wanna use many apis you can extend BaseHttp and set up new api in config.json. In new http file you have extended BaseHttp you call set baseUrl function to set new api

import { BaseHttp } from "./base.http";
import { AppConfig } from "./../config/app.config";
import { Http } from "@angular/http";

export class TestExtendService extends BaseHttp {
  constructor(_http: Http,_config:AppConfig ) {
    super(_http, _config);
    // Set up this url in config.json
    var baseUrl = _config.getConfig('baseUrl');
    this.setBaseUrl(baseUrl);
  }
}

7/ Array service usage

** Inject array service which is you gonna use

import { ArrayService } from 'ng2-adasia-common/ng2_adasia_services/services/array.service';

constructor(private _arraySerivce:ArrayService){
}

8/ Dictionary service usage

** Inject Dictionary service which is you gonna use

import { DictionaryService } from "./../../ng2_adasia_services/services/dictionary.service";

constructor(private _dictionarySerivce:DictionaryService){
}

9/ Console service usage (To avoid log out in product envirment we use this service)

** Inject Console service which is you gonna use

import { ConsoleSerivce } from "./../../ng2_adasia_services/services/console.service";

constructor(private _consoleSerivce:ConsoleSerivce){
}

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago