🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

This is a simple Google font picker for Angular 2 that you can select a font by clicking the first button and toggle the config options from the two other buttons.

Plugins

Documentation

Angular Font Picker

npm version

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

This documentation is for the latest 5/6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from here.

Quick links

Example application | StackBlitz example

Building the library

npm install npm start

Running the example

cd example npm install npm start

Library development

npm link cd example npm link ngx-font-picker

Installing and usage

npm install ngx-font-picker --save
Load the module for your app (with global configuration):

Global configuration should be provided only once (this is usually done in the root module).

import { FontPickerModule } from 'ngx-font-picker'; import { FONT_PICKER_CONFIG } from 'ngx-font-picker'; import { FontPickerConfigInterface } from 'ngx-font-picker';  const DEFAULT_FONT_PICKER_CONFIG: FontPickerConfigInterface = {   // Change this to your Google API key   apiKey: 'AIzaSyA9S7DY0khhn9JYcfyRWb1F6Rd2rwtF_mA' };  @NgModule({   ...   imports: [     ...     FontPickerModule   ],   providers: [     {       provide: FONT_PICKER_CONFIG,       useValue: DEFAULT_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').  [fpAutoLoad]                 // Auto loads font on change (fontPicker input change).  [fpSearchText]               // Search hint text (Default: 'Search fonts...'). [fpLoadingText]              // Fonts loading text (Default: 'Loading fonts...').  [fpPopularLabel]             // Popular fonts label (Default: 'Popular fonts'). [fpResultsLabel]             // Search results label (Default: 'Search results').  [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). [fpPresetNotice]             // Notice to show for custom fonts (Default: undefined).  [fpFallbackFont]             // Fallback font (Default: {family: 'Roboto', size: 14}).  [fpCancelButton]             // Show cancel button in the font picker (Default: false). [fpCancelButtonText]         // Text label for the cancel button (Default: 'Cancel'). [fpCancelButtonClass]        // Class name for the cancel button (Replaces default).  [fpUploadButton]             // Show upload button in the font picker (Default: false). [fbUploadButtonText]         // Text label for the upload button (Default: 'Upload'). [fpUploadButtonClass]        // Class name for the upload button (Replaces default).  [fpDialogDisplay]            // Dialog positioning mode: 'popup', 'inline' ('popup').                              //   popup: dialog is shown as popup (fixed positioning).                              //   inline: dialog is shown permanently (static positioning).  [fpUseRootViewContainer]     // Create dialog component in the root view container (false).                              // Note: The root component needs to have public viewContainerRef.  (fontPickerChange)           // Event handler for the font / size / style change.  (fontPickerUpload)           // Event handler for the font upload button click event.
Available configuration options (for the global configuration):
apiKey                       // Your Google API key for the Google Web Fonts API.
Available control / helper functions (provided by the service):

loadFont(font) // Loads the given font (family:style) from Web Fonts.

getAllFonts(sort) // Returns list of Google Fonts with given sort option: // 'alpha' | 'date' | 'popularity' | 'style' | 'trending'

Available control / helper functions (provided by the directive):
loadFont(font)               // Loads the (font.family:font.style) form Web Fonts.  openDialog()                 // Opens the font picker dialog if not already open. closeDialog()                // Closes the font picker dialog if not already closed.  toggleDialog()               // Toggles the open state of the font picker dialog.

You May Also Like