Code Monkey home page Code Monkey logo

ngx-font-size's Introduction

ngx-font-size npm version StackBlitz

An Angular component for web accessibility that allows the visitor to toggle between font sizes on the app.

Available options

mdSize is set to be the default font size.

Option Description
iconColor The color of the toggle icons.
selectedColor The color of the selected icon.
lgSize A string that represents the large font size in px/rem/...
mdSize A string that represents the medium font size in px/rem/...
smSize A string that represents the small font size in px/rem/...

Install

$ npm install ngx-font-size --save

Usage

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxFontSizeModule } from 'ngx-font-size';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxFontSizeModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use its component in your Angular application:

<!-- You can now use NgxFontSize component in app.component.html -->
<h1>
  {{title}}
</h1>
<ngx-font-size
    [iconColor]=iconColor
    [selectedColor]="'#247AFD'"
    [lgSize]="'1.15rem'"
    [mdSize]="'1.05rem'"
    [smSize]="'15px'"
></ngx-font-size>

StackBlitz Demo

License

MIT © Wadie

ngx-font-size's People

Contributors

dependabot[bot] avatar wadie avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

hasokeric

ngx-font-size's Issues

Can't compile

ERROR in ./node_modules/ngx-font-size/src/lib/ngx-font-size.component.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\xxxxxxxxxx\node_modules\ngx-font-size\src\lib\ngx-font-size.component.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.
at AngularCompilerPlugin.getCompiledFile (C:\xxxxxxxxxxxx\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:938:23)
at C:\xxxxxxxxxxxxxx\node_modules@ngtools\webpack\src\loader.js:42:31
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:95:5)

cant build it 

ERROR in ./node_modules/ngx-font-size/src/lib/ngx-font-size.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\source\Portal\node_modules\ngx-font-size\src\lib\ngx-font-size.module.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:\source\Portal\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:913:23)
    at C:\source\Portal\node_modules\@ngtools\webpack\src\loader.js:41:31
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

im using
Angular CLI: 8.3.29
Node: 12.11.1
OS: win32 x64
Angular: 8.2.14

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.