{"id":13808959,"url":"https://github.com/zefoy/ngx-font-picker","last_synced_at":"2025-05-14T03:32:00.542Z","repository":{"id":16681331,"uuid":"66932709","full_name":"zefoy/ngx-font-picker","owner":"zefoy","description":"Google fonts font picker widget for Angular (version 2 and newer)","archived":false,"fork":false,"pushed_at":"2024-10-19T16:24:47.000Z","size":9808,"stargazers_count":20,"open_issues_count":10,"forks_count":10,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-05T14:52:38.796Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zefoy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-30T10:57:23.000Z","updated_at":"2024-07-09T03:22:40.000Z","dependencies_parsed_at":"2024-06-18T22:59:27.311Z","dependency_job_id":"d93bc65e-6878-404a-bec4-e71e20f71109","html_url":"https://github.com/zefoy/ngx-font-picker","commit_stats":{"total_commits":240,"total_committers":8,"mean_commits":30.0,"dds":0.125,"last_synced_commit":"b6869c9d5dfbd2ef10340691fded6409ef54b7cf"},"previous_names":["zefoy/angular2-font-picker"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-font-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-font-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-font-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zefoy%2Fngx-font-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zefoy","download_url":"https://codeload.github.com/zefoy/ngx-font-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273297,"owners_count":17448083,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:56.111Z","updated_at":"2024-11-19T00:31:16.339Z","avatar_url":"https://github.com/zefoy.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Visual Effects"],"readme":"# Angular Font Picker\n\n\u003ca href=\"https://badge.fury.io/js/ngx-font-picker\"\u003e\u003cimg src=\"https://badge.fury.io/js/ngx-font-picker.svg\" align=\"right\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n\nThis is a simple font picker loosely based on the cool angular2-color-picker by Alberplz.\n\nThis 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 \u003ca href=\"https://github.com/zefoy/ngx-font-picker/tree/4.x.x/\"\u003ehere\u003c/a\u003e.\n\n### Quick links\n\n[Example application](https://zefoy.github.io/ngx-font-picker/)\n |\n[StackBlitz example](https://stackblitz.com/github/zefoy/ngx-font-picker/tree/master)\n\n### Building the library\n\n```bash\nnpm install\nnpm run build\n```\n\n### Running the example\n\n```bash\nnpm install\nnpm run start\n```\n\n### Installing and usage\n\n```bash\nnpm install ngx-font-picker --save\n```\n\n##### Load the module for your app (with global configuration):\n\nGlobal configuration should be provided only once (this is usually done in the root module).\n\n```javascript\nimport { FontPickerModule } from 'ngx-font-picker';\nimport { FONT_PICKER_CONFIG } from 'ngx-font-picker';\nimport { FontPickerConfigInterface } from 'ngx-font-picker';\n\nconst DEFAULT_FONT_PICKER_CONFIG: FontPickerConfigInterface = {\n  // Change this to your Google API key\n  apiKey: 'AIzaSyA9S7DY0khhn9JYcfyRWb1F6Rd2rwtF_mA'\n};\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    FontPickerModule\n  ],\n  providers: [\n    {\n      provide: FONT_PICKER_CONFIG,\n      useValue: DEFAULT_FONT_PICKER_CONFIG\n    }\n  ]\n})\n```\n\n##### Use it in your HTML template (for example in div element):\n\n```html\n\u003cdiv #fontPickerElement=ngxFontPicker [(fontPicker)]=\"font\" [fpWidth]=\"'320px'\" [fpPosition]=\"'bottom'\"\u003e\n  Click to open the font picker\n\u003c/div\u003e\n```\n\n```javascript\n[(fontPicker)]               // Selected font ({family, size, style, styles, files}).\n\n[fpWidth]                    // Width of the font picker (Default: '280px').\n[fpHeight]                   // Height of the font picker (Default: '320px').\n\n[fpPosition]                 // Position of the font picker (Default: 'bottom').\n\n[fpAutoLoad]                 // Auto loads font on change (fontPicker input change).\n\n[fpSearchText]               // Search hint text (Default: 'Search fonts...').\n[fpLoadingText]              // Fonts loading text (Default: 'Loading fonts...').\n\n[fpPopularLabel]             // Popular fonts label (Default: 'Popular fonts').\n[fpResultsLabel]             // Search results label (Default: 'Search results').\n\n[fpSizeSelect]               // Show size selector in the font picker (Default: false).\n[fpStyleSelect]              // Show style selector in the font picker (Default: false).\n\n[fpPresetLabel]              // Label for the preset fonts list (Default: undefined).\n[fpPresetFonts]              // Listing of preset fonts to show (Default: undefined).\n[fpPresetNotice]             // Notice to show for custom fonts (Default: undefined).\n\n[fpFallbackFont]             // Fallback font (Default: {family: 'Roboto', size: 14}).\n\n[fpCancelButton]             // Show cancel button in the font picker (Default: false).\n[fpCancelButtonText]         // Text label for the cancel button (Default: 'Cancel').\n[fpCancelButtonClass]        // Class name for the cancel button (Replaces default).\n\n[fpUploadButton]             // Show upload button in the font picker (Default: false).\n[fbUploadButtonText]         // Text label for the upload button (Default: 'Upload').\n[fpUploadButtonClass]        // Class name for the upload button (Replaces default).\n\n[fpDialogDisplay]            // Dialog positioning mode: 'popup', 'inline' ('popup').\n                             //   popup: dialog is shown as popup (fixed positioning).\n                             //   inline: dialog is shown permanently (static positioning).\n\n[fpUseRootViewContainer]     // Create dialog component in the root view container (false).\n                             // Note: The root component needs to have public viewContainerRef.\n\n[fpFilterByFamilies]         // Provides a list of font families that are allowed to be used (Default: [])\n[fpSortByFamilies]           // Sort fonts by family (Default: false)\n\n(fontPickerChange)           // Event handler for the font / size / style change.\n\n(fontPickerUpload)           // Event handler for the font upload button click event.\n```\n\n##### Available configuration options (for the global configuration):\n\n```javascript\napiKey                       // Your Google API key for the Google Web Fonts API.\n```\n\n##### Available control / helper functions (provided by the service):\n\n```javascript\nloadFont(font)               // Loads the given font (family:style) from Web Fonts.\n\ngetAllFonts(sort)            // Returns list of Google Fonts with given sort option:\n                             // 'alpha' | 'date' | 'popularity' | 'style' | 'trending'\n```\n\n##### Available control / helper functions (provided by the directive):\n\n```javascript\nloadFont(font)               // Loads the (font.family:font.style) form Web Fonts.\n\nopenDialog()                 // Opens the font picker dialog if not already open.\ncloseDialog()                // Closes the font picker dialog if not already closed.\n\ntoggleDialog()               // Toggles the open state of the font picker dialog.\n```\n\n##### Accessing the Font Picker directive by using a ViewChild reference:\n\n```javascript\n@ViewChild('fontPickerElement', {static: true})\nfontPicker: FontPickerDirective;\n  \ncloseFontPicker(field: string): void {\n  this.fontPicker.closeDialog();\n}  \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzefoy%2Fngx-font-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzefoy%2Fngx-font-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzefoy%2Fngx-font-picker/lists"}