# ngx-font-picker

**Repository Path**: mirrors_zefoy/ngx-font-picker

## Basic Information

- **Project Name**: ngx-font-picker
- **Description**: Google fonts font picker widget for Angular (version 2 and newer)
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Angular Font Picker

<a href="https://badge.fury.io/js/ngx-font-picker"><img src="https://badge.fury.io/js/ngx-font-picker.svg" align="right" alt="npm version" height="18"></a>

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

This documentation is for the latest version which requires Angular version newer than 2 major versions prior to the current latest version. For older Angular versions you need to use an older version of this library.

### Quick links

[Example application](https://zefoy.github.io/ngx-font-picker/)
 |
[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-font-picker/tree/master)

### Building the library

```bash
npm install
npm run build
```

### Running the example

```bash
npm install
npm run start
```

### Installing and usage

```bash
npm install ngx-font-picker --save
```

##### Provide the global configuration:

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

```javascript
import { provideHttpClient } from '@angular/common/http'

import { FONT_PICKER_CONFIG, FontPickerConfigInterface, FontStylesPipe } from 'ngx-font-picker'

const DEFAULT_FONT_PICKER_CONFIG: FontPickerConfigInterface = {
  apiKey: '<PLACE YOUR GOOGLE API KEY HERE>'
}

bootstrapApplication(AppComponent, {
  ...
  providers: [
    ...
    provideHttpClient(),
    {
      provide: FONT_PICKER_CONFIG,
      useValue: DEFAULT_FONT_PICKER_CONFIG
    }
  ]
})
```

##### Import the library into your component:

```javascript
import { FontPickerDirective } from 'ngx-font-picker';

@Component({
  ...
  imports: [
    ...
    FontStylesPipe,
    FontPickerDirective
  ]
})
```

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

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

```javascript
[(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.

[fpFilterByFamilies]         // Provides a list of font families that are allowed to be used (Default: [])
[fpSortByFamilies]           // Sort fonts by family (Default: false)

(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):

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

##### Available control / helper functions (provided by the service):

```javascript
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):

```javascript
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.
```

##### Accessing the Font Picker directive by using a ViewChild reference:

```javascript
@ViewChild('fontPickerElement', {static: true})
fontPicker: FontPickerDirective;
  
closeFontPicker(field: string): void {
  this.fontPicker.closeDialog();
}  
```