Angular2 Google Font Picker – Google Font Picker in Angularjs2

Angular2 Google Font Picker – how to use Google Font Picker in Angularjs2

Angular2 Google Font Picker :: Angular2 Google Font Picker is a very simple and easy to use Google Font Picker in Angularjs2, that we can select a font by clicking(using google api ) the first button and toggle the config options(of fonts) from the two other buttons.

It is a very simple and easy font picker based on the cool angular2-color-picker for google product.

View DemoGit Code

How to Building librarys for Angular2 Google Font Picker

npm install
npm run build

How to Running the example of Angular2 Google Font Picker

cd example
npm install
npm start

How to Installing and use Angular2 Google Font Picker

npm install angular2-font-picker --save-dev

Load the module for your app with using global configuration ::

// import angular2-font-picker hear
import { FontPickerModule } from 'angular2-font-picker';
// importangular2-font-picker hear
import { FontPickerConfigInterface } from 'angular2-font-picker';

// const FONT PICKER CONFIG
const FONT_PICKER_CONFIG: FontPickerConfigInterface = {
// Change this to your Google API key
apiKey: 'ADD-YOURGOOGLE-API-KEY'
};

@NgModule({
... // your data
imports: [
... // your data
FontPickerModule.forRoot(FONT_PICKER_CONFIG)
]
})

Use it in your html template for example in div(


) HTML element:

<div [fpPosition]="'bottom'" [fpWidth]="'320px'"  [(fontPicker)]="font" >
Click Hear to open font picker</div>
[(fontPicker)]
// Selected you font family hear({family, size, style, styles, files}).
[fpWidth] :: font picker Width (Default: ‘280px’).
[fpHeight] :: Height for font picker (Default: ‘320px’).
[fpPosition] :: Position for font picker (Default: ‘bottom’).
[fpSizeSelect] :: size Show selector in font picker (Default: false).
[fpStyleSelect] :: style Show selector in font picker (Default: false).
[fpPresetLabel] :: Label for preset fonts list (Default: undefined).
[fpPresetFonts] :: Listing for preset fonts to show (Default: undefined).
[fpFallbackFont] :: Fallback font (Default: {family: ‘Roboto’, size: 14}).
[fpCancelButton] :: cancel button Show in font picker (Default: false).
(fontPickerChange) :: font/size/style change Event handler.

Available configuration options for the use of global configuration ::

apiKey :: Add Your Google API key for use the Google Web Fonts API.

YOU ALSO LIKE :: Angular2 dual listbox example

Leave a Comment

Your email address will not be published. Required fields are marked *

36  +    =  46

We accept paid advance and paid guest Posting on our Site : Contact US