angular2-font-picker

Angular 2 Font Picker

This is a simple font picker based on the cool angular2-color-picker by Alberplz.

See a live example application here.

Building the library

npm install
npm run build

Running the example

cd example
npm install
npm start

Installing and usage

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

Load the module for your app (with global configuration):

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

const FONT_PICKER_CONFIG: FontPickerConfigInterface = {
  // Change this to your Google API key
  apiKey: 'AIzaSyA9S7DY0khhn9JYcfyRWb1F6Rd2rwtF_mA'
};

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

Use it in your html template (for example in div element):

<div [(fontPicker)]="font" [fpWidth]="'320px'" [fpPosition]="'bottom'">
  Click to open the font picker</div>

[(fontPicker)]      // Selected font ({family, size, style, styles, files}).

[fpWidth]           // Width of the font picker (Default: '280px').
[fpHeight]          // Height of the font picker (Default: '320px').
[fpPosition]        // Position of the font picker (Default: 'bottom').
[fpSizeSelect]      // Show size selector in the font picker (Default: false).
[fpStyleSelect]     // Show style selector in the font picker (Default: false).
[fpPresetLabel]     // Label for the preset fonts list (Default: undefined).
[fpPresetFonts]     // Listing of preset fonts to show (Default: undefined).
[fpFallbackFont]    // Fallback font (Default: {family: 'Roboto', size: 14}).
[fpCancelButton]    // Show cancel button in the font picker (Default: false).

(fontPickerChange)  // Event handler for the font / size / style change.

Available configuration options (for the global configuration):

apiKey              // Your Google API key for the Google Web Fonts API.