font-color-pipe v0.0.8

FontColorPipe

Angular 5

This package will not work with earlier versions of Angular!

This project contains an Angular 5 pipe that can be used for calculating the best font to display over an arbitrary background. The pipe, FontColorPipe, is exported from the FontColorModule.

Demo

NPM

npm install --save font-color-pipe

Usage

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FontColorModule } from 'font-color-pipe';

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


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FontColorModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

./src/app/app/module.ts

import { Component, OnInit, ElementRef } from '@angular/core';

const WHITE: string = "#FFFFFF";
const BLACK: string = "#000000";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    public _bg: string = WHITE;
    constructor(private ref:ElementRef) {}
    public ngOnInit(): void {
        setInterval(
            () =>
                this.bg = this.bg === BLACK ? WHITE : BLACK,
                1000
        );
    }
    public set bg(bg: string) {
        this._bg = bg;
        this.ref.nativeElement.style.backgroundColor = this.bg;
    }
    public get bg(): string {
        return this._bg;
    }
}

src/app/app.component.ts

<h1 id="font" [ngStyle]="{'color':bg | fontColor}">Hello</h1>

src/app/app.component.html