zefoy / ngx-font-picker Goto Github PK

I am using ""ngx-font-picker": "^14.0.0","

some fonts are only selected if they are clicked twice.

The ReflectiveInjector was removed from @angular/core, leading to this error when building:

export 'ReflectiveInjector' (imported as 'ReflectiveInjector') was not found in '@angular/core'

To make the library compatible with Angular 16, this dependency should be removed/replaced.

I am using the following code in my HTML.

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

Following is my package.json.
{ "name": "wiz-merchant-manager", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "startssl": "ng serve --ssl --ssl-key certs/privkey1.pem --ssl-cert certs/fullchain1.pem --host local.dev.wizshops.com", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "locales": "ngx-translate-extract -i ./src -o src/assets/locale/{ar,en}.json --sort --format namespaced-json" }, "private": true, "dependencies": { "@angular/animations": "~11.0.0", "@angular/cdk": "^11.0.0", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0", "@angular/localize": "~11.0.0", "@angular/material": "^11.0.0", "@angular/platform-browser": "~11.0.0", "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@biesbjerg/ngx-translate-extract": "^7.0.3", "@biesbjerg/ngx-translate-extract-marker": "^1.0.0", "@fortawesome/fontawesome-free": "^5.15.1", "@ng-bootstrap/ng-bootstrap": "^8.0.0", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "angular-cookies": "~1.8.2", "bootstrap": "^4.5.3", "chart.js": "^2.9.4", "jsbarcode": "^3.6.0", "ng-cookies": "^1.0.2", "ng2-charts": "^2.4.2", "ngx-barcode": "^0.3.0", "ngx-color-picker": "^10.1.0", "ngx-cookie": "^5.0.0", "ngx-font-picker": "^11.0.0", "ngx-print": "^1.2.0-beta.5", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.1", "@angular/cli": "~11.0.1", "@angular/compiler-cli": "~11.0.0", "@types/angular-cookies": "^1.8.0", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2" }, "peerDependencies": { "@angular/core": "^11.0.3", "rxjs": "^5.1.0", "zone.js": "^0.8.4" } }

In my theme.module.ts file, I have added the following code:

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

const DEFAULT_FONT_PICKER_CONFIG: FontPickerConfigInterface = {
  // Change this to your Google API key
  apiKey: environment.googleAPIkey
};

 imports: [
    FontPickerModule
  ],

providers: [
    {
      provide: FONT_PICKER_CONFIG,
      useValue: DEFAULT_FONT_PICKER_CONFIG
    }
  ]

But when I run the application using 'npm start', I get the following error:
Property 'getStyles' is missing in type 'FontInterface' but required in type 'Font'.

I tried adding the import code in app.module.ts file as well, but I still get the same error.

Can you please help?

Default font Style and Font Size dropdown couldnot be open while loading Component. I used the fpFontStyle and fpFontSize directive but I checked the library and by default component property selectedfont is false and that we can not set while loading.

It should be possible to upload a font file as a custom font or for a preset font which can not be found from the google web fonts.

Hello, I installed this package today on Angular 8, I followed all the steps in the documentation, but I get this error.

Can't bind to 'fontPicker' since it isn't a known property of 'div'.

Also this happens with the other properties too.

I'm using
"ngx-font-picker": "^9.0.0"

When using [fpPosition]="'top'" after opening the widget for the first time it will no longer display above the parent element.

This can easily be verified on StackBlitz:
https://stackblitz.com/github/vbwigowk
https://vbwigowk.github.stackblitz.io

I want to use the font picker in a angular 5 app (generated with angular cli 1.5) but getting the error:

ERROR in node_modules/ngx-perfect-scrollbar/dist/lib/perfect-scrollbar.module.d.ts(1,31): error TS2305: Module '".../node_modules/@angular/core/core"' has no exported member 'OpaqueToken'.

I am integrating the color picker into my application and want to make substantial style changes to it. In particular I am making a dark theme for it.

What is the best way to achieve this? I'd like to exclude the css from the color picker in node modules and then include it in my own SCSS file in my app. This is so I don't loose changes if I upgrade and secondly to make sure I don't duplicate and override css.

If I delete the css in the main css file the syles still show. Any ideas or alternative suggestions?

Hello, I've faced multiple issues after upgrading my whole code to Angular v13 but basically came down to the thing that ngx-font-picker has ngx-scrollbar as dependency which is listed with version incompatible with Angular v13.

I see that here in Github the dependency is listed correctly, having version ^9.0.0 which supports Angular v13. However, when installing via npm for some reason the ngx-scrollbar is listed as dependency with version ^7.x.

Can you check what's the issue here?

Nice component!
But: I can't select basic fonts such as Verdana & Arial. Any idea?

"perfect-scrollbar.component.js:132 Deprecated function, update needs to be called through directiveRef!"

I am getting this warning message in my angular2 website and I am unable to scroll the font list inside font list container.
Please let me know how to fix this.

Hello:
I don't know if this is a question, an enhancement or just a concern, anyhow, I was happily using this amazing library as you can see in the attached screenshot and I noticed in the Javascript console the following warning:

.../node_modules/ngx-font-picker/fesm2015/ngx-font-picker.js depends on 'webfontloader'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

It happened after upgrading to Angular 10, everything works great but it looks like the AOT compilation is starting to warn about CommonJS and AMD dependencies. I don't know which the implications would be in a near future. It sounds like the font picker uses a javascript module called webfontloader which is distributed as CommonJS module or AMD module.

What the screenshot is about? It is a Real Estate Platform where users can create a CMS-like custom page but focusing of the features of a property, market, agent or broker and certainly they will need to pick a font that goes with their company identity, this is a piece of the admin side. Wonderful job with this library by the way.

Using the font picker, if you use preset fonts and then open/close/open the font picker, the google fonts disappear?

Hello
i m using angular 2 seed .i wanna implement your framework .i follow the steps but it give me an error

Update to using latest angular2-perfect-scrollbar

We want to display only preset fonts in the font picker dialogue box or you can say only specific fonts. But I looked documentation as well as code repository and there is no option to restrict google fonts also that is getting set as currentfonts variable in the font-picker component.

I am using ngx-font-picker. when i installed it in angular and tried to compile with webpack I get the following error

ERROR in ./node_modules/ngx-perfect-scrollbar/fesm5/ngx-perfect-scrollbar.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (/Users/omar/Dropbox/Sites/ZaynTek/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)

ngx-font-picker is using this
"ngx-font-picker": "^9.0.0",
"ngx-perfect-scrollbar": "^9.0.0",

this is my env

Angular CLI: 7.3.9
Node: 10.16.3
OS: darwin x64
Angular: 7.2.16
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@angular/fire                     5.0.0
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.42.0

does anyone know what i can do to get ngx-perfect-scrollbar to compile?

I want to use this library as a reactive form control?

Can you please let me know if this is possible?

Hi, I used your's FontPickerModule in my app with lazy loaded modules. I provided configuration in my CoreModule. But to use FontPicker features i had to import FontPickerModule in my SharedModule. Which is of course imported to each lazy loaded module in my app. The problem is that your's package imports HttpClientModule, so new instance of HttpClient is created and my Authorization Interceptor stop works in lazy loaded modules. Just services with provideIn: 'root' still working.

Issue
When installing the package one gets the following warning:

deprecated @angular/[email protected]: This package has been deprecated. Please see https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127

Solution
The dependency on @angular/flex-layout should be removed in favour of using CSS.

How can I change a font on page load?

The change event does load the font? How can I trigger it on page load?

(I have different fonts on a page which i've set before)

Installed the latest version using yarn. Getting the error as Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.ts and application is not building.

Angular version - 14

font picker

"ngx-font-picker": "^15.0.0",

Deleted node_modules folder and cleared the cache as well. but nothing worked.

Could you check what's the issue here?

I have decided to rename the library to ngx-font-picker so that there is less confusion when Angular 4 is released.

Hello there and thanks for the great lib!
I'd like to ask if there is any possibility to filter the fonts to have only those I'm interested in?
It would be nice if we could filter them by family, so that a method/function that filters them could have an array with strings such as
['family1', 'family2', 'family3']