Angular6 CF Button Library

Angular6 CF Button Library

This library can be used in angular6 projects independent of using bootstrap or angular material as FE framework

Instllation

    npm i cf-btn-lib 
    npm install cf-btn-lib

How to use this module?

After installation include CfBtnLibModule in root app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CfBtnLibModule } from 'cf-btn-lib';    //  <----- Include this 
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    CfBtnLibModule  //  <----- Include CfBtnLibModule  in import senction 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use options property in button like this in app.component.html

 <cf-btn [options]='cfButtonOptions' (click)='clickHandler()'></cf-btn> 

Define cfButtonOptions in app.component.ts file

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  	cfButtonOptions : Object = {  
                active        : false,
                text          : 'Save', // 
                buttonColor   : 'primary',
                barColor      : 'accent',
                raised        : true, 
                matIcon       : 'home',   //This is standard mat icons
                matColor      : 'white' 
              };

    clickHandler(){
        //Logic -- exp. HTTP req
    }
}

Include below link in index.html file.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

###Button Color Support

buttonColor   : 'primary',
buttonColor   : 'danger',
buttonColor   : 'warning',
buttonColor   : 'random', // <---- Default white