ngx-ribbon

An Angular UI Component library for corner ribbons.

Installation

npm install --save ngx-ribbon

Usage

Initialize module

Import the library into your app module:

import { NgxRibbonModule } from 'ngx-ribbon';
@NgModule({
  imports: [
    // ... your other module imports
    NgxRibbonModule,
  ],
})

Use on template

<ngx-ribbon label="hello world!" [scale]="0.5"></ngx-ribbon>

Contributing

Known Issues

1. Ribbon floats when using browser's zoom tool.
2. Ribbon labels' font-size are not dynamic.
3. Ribbon labels are upside down for position=bottom-*.

Development

Run ng serve and npm run watch on separate terminals.

Running unit tests

Run ng test to execute the unit tests via Karma.

# Issue on testing with Windows Chrome via WSL2

Please see this StackOverflow post. Similar to the answers, you can add your permanent environment variable on .bashrc or .zshrc. For example:

export CHROME_BIN="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"