thisloke / ng2-fittext Goto Github PK

It doesn't apply unless I resize my browser window. Not sure why.

"ng2-fittext": "^1.2.12"

 <div *ngIf="appUser" class="user">
    <div class="anchor" #container  [routerLink]="['/user']">
      <div [fittext]="true" [activateOnResize]="false" [container]="container" [maxFontSize]="13">{{appUser.firstName}}</div>
    </div>
  </div>

I have problems compiling with Ivy enabled. I get the following message. Any ideas anbody?

ERROR in node_modules/ng2-fittext/ng2-fittext.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of DashboardModule, but could not be resolved
to an NgModule class

1 export declare class Ng2FittextModule {
                       ~~~~~~~~~~~~~~~~
src/app/app.module.ts:80:12 - error NG1010: Value at position 11 in the NgModule.imports of AppModule is not a reference: [object Object]

Upgraded from angular5 to angular6 and this package stopped working
Getting the following warnings

[email protected] requires a peer of @angular/common@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/compiler@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/platform-browser-dynamic@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of rxjs@^5.0. You must install peer dependencies yourself.

Hi,
the module works great but if I update model with a service the text doesn't fit.
I need a polish way to resize after update model.

I try with resize event but for some reason I can't use this.

Hello!
I am using angular 4.1.0 along with ionic-angular 3.2.1 and I encountered next problem

Unhandled Promise rejection: Template parse errors:
Can't bind to 'fittext' since it isn't a known property of 'div'. 

I imported Ng2FittextModule and declared Ng2FittextModule in my module

import { Ng2FittextModule } from 'ng2-fittext/ng2fittext';

@NgModule({
    imports: [
        ...
        Ng2FittextModule,
        ....
    ],
})
export class AppModule { }

My HTML:

<div class="round-progress-wrapper"
        #roundProgressWrapper>
         <div [fittext]="true"
                 [activateOnResize]="true"
                 [container]="roundProgressWrapper">50</div>
</div>

What I have done wrong and how can i fix it?

Hey there,
is it possible to set some max font size? Or to just change Font size if text does not fit?
I have a grid with menu labels where fittext is set. It works, but it makes the label font-size also bigger which I dont want. Just smaller to fit in the grid column if its a long text label.

Greetings

Merge #69 #70 #71 #72 #73 #74 #75

Hi,
i have upgraded angular in my project to version 4.3.5 and when i run 'ng serve' command i get :

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in .../node_modules/ng2-fittext/node_modules/@angular/core/core.d.ts, resolving symbol Ng2FittextModule in .../node_modules/ng2-fittext/src/ng2fittext.module.ts, resolving symbol Ng2FittextModule in .../node_modules/ng2-fittext/src/ng2fittext.module.ts

version of ng2-fittext: 1.0.23

Do you have any idea how to fix this problem ?

Thank you !

Its not working on ng 5.2

I test with Angular 4.

On the line "import {Ng2FittextModule} from "ng2-fittext/ng2-fittext";" lo correcto sería import {Ng2FittextModule} from "ng2-fittext/ng2fittext";

If I add the style below with font-weight: 600 it sets the font size to 12px and overflows the div. If I comment out the font-bold and leave the weight as default it sets the font size to 10px and works.

If it is bold (12px) and overflowing and I resize the screen it changes to 10px right away and works.
So it is just not working on initial load.

Bold:
element.style {
    will-change: content;
    font-size: 12px;
}

No bold: 
element.style {
    will-change: content;
    font-size: 10px;
}

Bold after resize:
element.style {
    will-change: content;
    font-size: 10px;
}

<div class="anchor" #container>
      <div [fittext]="true" [activateOnResize]="true" [container]="container">{{appUser.firstName}}</div>
</div>

.anchor {
	font-weight: 600;
}

When I import the module i see this compile time error:

ERROR in No suitable injection token for parameter 'el' of class 'Ng2FittextDirective'.
no type or decorator

any ideas why?

Thanks

Angular CLI: 8.3.20
Node: 12.15.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.803.20
@angular-devkit/build-angular 0.803.20
@angular-devkit/build-optimizer 0.803.20
@angular-devkit/build-webpack 0.803.20
@angular-devkit/core 8.3.20
@angular-devkit/schematics 8.3.20
@angular/cli 8.3.20
@ngtools/webpack 8.3.20
@schematics/angular 8.3.20
@schematics/update 0.803.20
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2

ERROR in ./node_modules/ng2-fittext/fesm5/ng2-fittext.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 (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:265:35)
at checkNodeForDecorators (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:77:21)
at visitNodes (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16514:30)
at Object.forEachChild (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16740:24)
at checkNodeForDecorators (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16635:21)
at checkNodeForDecorators (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16692:24)
at checkNodeForDecorators (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16703:24)
at checkNodeForDecorators (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\src\transforms\scrub-file.js:68:31)
at visitNode (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16505:24)
at Object.forEachChild (D:\work\sc\sc-petquote\sc-petquote-angular\node_modules@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16599:21)

Hello,

I've tried your component however I seem to have an issue with it.
If I use it:
<div class="information-input-2row" style="width:100px;color:black;background-color: rgba(0, 0, 0, 0.1);white-space: nowrap;" #base_1 [container]="base_1" [fittext]="true" [activateOnResize]="true" [modelToWatch]="currentInfoModel">{{currentInfoModel?.base_1 | removeUndefined}}</div>

When the value of the model.base_1 goes from "" to "something" this something is displayed gigantically. only after resizing the browserwindow manually the text is resized.

Also, seems that resizing the window is seriously slow. Probably an eventlistener which is not debounced?

Kind regards,

lander

After updating Angular 5 and Angular CLI 1.5 I get the error when I run ng serve:

ERROR in ./node_modules/ng2-fittext/ng2fittext.ts
Module build failed: Error: C:\xampp\htdocs\webpages\ios\ng-gopremium\node_modules\ng2-fittext\ng2fittext.ts is not part of
 the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (C:\xampp\htdocs\webpages\ios\ng-gopremium\node_modules\@ngtools\webpack\src\a
ngular_compiler_plugin.js:629:23)
    at plugin.done.then (C:\xampp\htdocs\webpages\ios\ng-gopremium\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at process._tickCallback (internal/process/next_tick.js:103:7)
 @ ./src/app/app.module.ts 21:0-58
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

For some reason the plugin returns font-size: 0px which is useless even if it breaks the code.
<owl-carousel #carousel [options]="{items: 1, dotsContainer: '.owl-dots', navigation: false, loop: true, lazyLoad: false, autoplay: true, autoplayTimeout: 5000, autoplayHoverPause: true }"> <div class="slide" *ngFor="let slide of slides"> <div class="content"> <div class="title" #titleRef> <span [fittext]="true" [activateOnResize]="true" [container]="titleRef">{{slide.title}}</span> </div> <div class="text" [innerHtml]="slide.text"></div> </div> </div> </owl-carousel>
In the output source html I get:
`

The plugin shouldn't return 0 even if there's not enough; The container element has a size of 100% screen width and height of 30px

Hi, have you thought about supporting Angular 13/14 please?

I have zone.js version 0.8.18 and when trying to install this it throws me the message of:

+-- [email protected]
`-- UNMET PEER DEPENDENCY [email protected]

npm WARN [email protected] requires a peer of [email protected] but none was installed.

Can we get this updated so it can be used with newer versions?
Thanks!

Problem:
It's seems that the approach that we're using now, so, checking the font overflow to find the font size that permit the text to fit into the container, it's very slow.

It should be nice to share here some method (linear in time or lower) that permit to compute the right font for the text.
Feel free to share any suggestion.

Have seen this issue previously in the "closed" status, but without an answer, so creating a new issue for it.

When building --prod getting the below error:

Error: ./node_modules/ng2-fittext/fesm5/ng2-fittext.js Module build failed: TypeError: Cannot read property 'kind' of undefined at isAngularDecoratorMetadataExpression (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:245:35) at checkNodeForDecorators (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:67:21) at visitNodes (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/typescript/lib/typescript.js:12699:30) at Object.forEachChild (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/typescript/lib/typescript.js:12875:24) at checkNodeForDecorators (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:58:31) at visitNode (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/typescript/lib/typescript.js:12690:24) at Object.forEachChild (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/typescript/lib/typescript.js:12782:21) at checkNodeForDecorators (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:58:31) at visitNode (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/typescript/lib/typescript.js:12690:24) at Object.forEachChild (/Users/kirstenfrager/Documents/Stake/Code/StackIonic/node_modules/typescript/lib/typescript.js:12828:24) @ ./src/pages/onboarding/phase-zero/phase-zero.page.module.ngfactory.js 25:0-35 @ ./src lazy @ ./node_modules/ionic-angular/util/ng-module-loader.js @ ./node_modules/ionic-angular/util/module-loader.js @ ./src/app/app.module.ngfactory.js @ ./src/app/main.ts

Package.json

"dependencies": {
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/app-availability": "4.18.0",
"@ionic-native/app-rate": "^4.20.0",
"@ionic-native/app-version": "4.18.0",
"@ionic-native/camera": "4.18.0",
"@ionic-native/clipboard": "4.18.0",
"@ionic-native/core": "4.18.0",
"@ionic-native/file": "^4.20.0",
"@ionic-native/file-path": "^4.20.0",
"@ionic-native/fingerprint-aio": "^4.20.0",
"@ionic-native/in-app-browser": "4.18.0",
"@ionic-native/keyboard": "4.18.0",
"@ionic-native/pro": "4.18.0",
"@ionic-native/safari-view-controller": "4.18.0",
"@ionic-native/screen-orientation": "^4.20.0",
"@ionic-native/social-sharing": "^4.20.0",
"@ionic-native/splash-screen": "4.18.0",
"@ionic-native/status-bar": "4.18.0",
"@ionic-native/taptic-engine": "^4.20.0",
"@ionic-native/unique-device-id": "^5.30.0",
"@ionic-native/vibration": "^4.20.0",
"@ionic/pro": "^2.0.3",
"@ionic/storage": "2.2.0",
"@ngrx/store": "^5.2.0",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "2.0.1",
"@types/highcharts": "^5.0.44",
"@types/humps": "^2.0.0",
"@types/lodash": "^4.14.119",
"analytics-node": "^3.4.0-beta.3",
"appboy-cordova-sdk": "git+https://github.com/joelstake/appboy-cordova-sdk.git#master",
"branch-cordova-sdk": "^4.2.1",
"cep-promise": "^3.0.9",
"compare-versions": "^3.6.0",
"cordova-android": "^7.1.4",
"cordova-android-support-gradle-release": "^1.4.7",
"cordova-browser": "5.0.4",
"cordova-clipboard": "^1.3.0",
"cordova-ios": "^6.1.1",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-app-version": "^0.1.11",
"cordova-plugin-apprate": "^1.7.1",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-cocoapod-support": "^1.6.2",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-facebook4": "^2.5.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-fingerprint-aio": "^1.7.0",
"cordova-plugin-inappbrowser": "^4.1.0",
"cordova-plugin-ionic": "^5.4.7",
"cordova-plugin-ionic-keyboard": "git+https://github.com/lukas-mertens/cordova-plugin-ionic-keyboard.git",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-proguard": "^2.2.0",
"cordova-plugin-safariviewcontroller": "^1.6.0",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-splashscreen": "^6.0.0",
"cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
"cordova-plugin-taptic-engine": "^2.2.0",
"cordova-plugin-uniquedeviceid": "^1.3.2",
"cordova-plugin-vibration": "^3.1.1",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-plugin-x-socialsharing": "^5.6.8",
"cpf-check": "^2.0.5",
"echarts": "^4.2.0-rc.1",
"es6-promise-plugin": "^4.2.2",
"file-saver": "^2.0.2",
"flipdown": "^0.3.2",
"gelerator": "^3.0.0",
"generate": "0.14.0",
"git-rev-sync": "^3.0.1",
"gulp": "^4.0.2",
"highcharts": "^6.2.0",
"highcharts-custom-events": "^2.2.6",
"humps": "^2.0.1",
"ionic-angular": "^3.9.2",
"ionic-tooltips": "^3.1.0",
"ionicons": "3.0.0",
"jquery": "^3.4.1",
"libphonenumber-js": "^1.8.5",
"lodash": "^4.17.11",
"moment": "^2.23.0",
"moment-timezone": "^0.5.23",
"ng-lottie": "^0.3.2",
"ng2-fittext": "1.2.12",
"ngx-mask": "^6.5.17",
"ngx-skeleton-loader": "^2.4.4",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"ts-md5": "^1.2.7",
"tslib": "^1.14.1",
"web-animations-js": "^2.3.1",
"xlsx": "^0.15.1",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.2",
"@ionic/lab": "1.0.20",
"@types/analytics-node": "^3.1.4",
"es6-template-strings": "^2.0.1",
"typescript": "~2.6.2"
},

Angular environment

`Angular CLI: 11.0.5
Node: 10.16.0
OS: darwin x64

Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1100.5 (cli-only)
@angular-devkit/core 11.0.5 (cli-only)
@angular-devkit/schematics 11.0.5 (cli-only)
@schematics/angular 11.0.5 (cli-only)
@schematics/update 0.1100.5 (cli-only)
rxjs 5.5.11
typescript 2.6.2`

When running normal dev builds no error occurs. Only with the --prod flags

ERROR in ./node_modules/ng2-fittext/index.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js): Error: C:\Users\Milos\Desktop\Projects\mAMS\src\angular\node_modules\ng2-fittext\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (C:\Users\Milos\Desktop\Projects\mAMS\src\angular\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:913:23) at plugin.done.then (C:\Users\Milos\Desktop\Projects\mAMS\src\angular\node_modules\@ngtools\webpack\src\loader.js:41:31) at process._tickCallback (internal/process/next_tick.js:68:7)

• check if doc (README.md) it's stil consistent with the features of the library
• fix not-working plunk examples
• add an animation of the classic behaviour of fittext to show it inside README.md
• add yarn install instruction
• add github badges
• Add more examples and key concept about how it works (container and text)

I am trying to use this in a card game, in which a card's text may change dynamically. Unfortunately, I haven't been able to get the modelToWatch attribute working. My html looks like this.

<xhtml:p xmlns="http://www.w3.org/1999/xhtml"
fittext="true" activateOnResize="true" [modelToWatch]="card.getText()"
useMaxFontSize="false" class="card-text" [innerHTML]="htmlText(card.getText())">
</xhtml:p>

When the card's text changes, even if it is clearly overflowing its container, it does not shrink (it is not at the minimum font size, so that shouldn't be a problem).

I was also unable to get it working with a simple boolean value which controls if a card is scaled up or not. Ideally, I would like the text to shrink if it gets longer, but expand when the card is scaled up.

I use this with bootstrap carousel to fit different lengths of text to fit, especially responsively on mobile site. The problem is that the feature does not activate until I scroll the site downwards. Any idea for this?

Also another question, I used previously the useMaxFontSize, and maybe it helped with this problem. Is there some reason why this was removed?

Thanks?