Home

Awesome

ngx-lamp

@omnedia/ngx-lamp is an Angular library that provides a customizable lamp effect component. The component allows for flexible configuration of the lamp's color and background color, enabling you to create various glowing effects that can enhance the visual appeal of your Angular application.

Features

Installation

Install the library using npm:

npm install @omnedia/ngx-lamp

Usage

Import the NgxLampComponent in your Angular module or component:

import { NgxLampComponent } from '@omnedia/ngx-lamp';

@Component({
  ...
  imports: [
    ...
    NgxLampComponent,
  ],
  ...
})

Use the component in your template:

<om-lamp [lampColor]="'#ffcc00'" [backgroundColor]="'#1e1e1e'" styleClass="custom-lamp"></om-lamp>

How It Works

API

<om-lamp
  [lampColor]="lampColor"
  [backgroundColor]="backgroundColor"
  styleClass="your-custom-class"
></om-lamp>

Example

<om-lamp [lampColor]="'#ff6347'" [backgroundColor]="'#000000'" styleClass="lamp-container">
</om-lamp>

This will create a lamp effect with a tomato-colored glow and a black background.

Styling

.om-lamp

Custom Lamp Styling Example

In this example, the lamp and its background are styled with custom colors via css instead of API values:

<div class="lamp-wrapper">
    <om-lamp styleClass="custom-lamp"></om-lamp>
</div>
.lamp-wrapper {
  width: 70%;
  height: 700px;
}

om-lamp {
  width: 100%;
  height: 100%;
}

.custom-lamp {
  --om-lamp-color: #ffcc00 !important;
  --om-lamp-background-color: #1e1e1e !important;
}

This will apply a yellowish glow and a dark background to the lamp.

Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

License

This project is licensed under the MIT License.