This librairy aims to provide a simple way to visually "disable" an entire HTML element.
npm install ngx-hover-opacityThis 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).
ngx-hover-opacity set to OFF
!A MatCard from material with ngx-hover-opacity set to OFF
ngx-hover-opacity set to ON
!A MatCard from material with ngx-hover-opacity set to ON
You can also try it live on Stackblitz!
To install this library, run:
``bash`
$ yarn add ngx-hover-opacity
or
`bash`
$ npm install ngx-hover-opacity --save
From your Angular module (AppModule for example):
`typescript
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:
`html``
Your content that might get hidden
MIT © Maxime ROBERT