font-color-pipe

FontColorPipe

This project contains an Angular 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