0.0.3 • Published 6 years ago
cf-btn-lib v0.0.3
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