ngx-font-picker

November 05, 2017
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 ngx-font-picker --save  

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

 import { FontPickerModule } from 'ngx-font-picker';  
 import { FontPickerConfigInterface } from 'ngx-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.  

Note: Special thanks to ZEF Oy
Contact: info@zef.fi
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments