ngx-hover-opacity

This librairy aims to provide a simple way to visually "disable" an entire HTML element.

For example, if you display a given resource and suddenly it's not available anymore (deleted on the server and you just received an event). Should you redirect the user to the home page? If he was reading it, it's a little rough, isn't it?

Instead of that, you might want to hover it, with a nice opacity, so the user cannot interact with it anymore. (Maybe you could also let him know what's happening with a message, but it's up to you).

Demo:

ngx-hover-opacity set to OFF

ngx-hover-opacity set to ON

You can also try it live on Stackblitz!

Installation

To install this library, run:

$ yarn add ngx-hover-opacity

or

$ npm install ngx-hover-opacity --save

Setup with Angular

From your Angular module (AppModule for example):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// import the module
import { NgxHoverOpacityModule } from 'ngx-hover-opacity';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,

    // specify it as an import
    NgxHoverOpacityModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Once your library is imported, you can use the component ngx-hover-opacity in your Angular application:

<ngx-hover-opacity [isHoverVisible]="true">
  <div>Your content that might get hidden</div>
</ngx-hover-opacity>

License

MIT © Maxime ROBERT