@ngu/magnify

Magnify

Magnify directive helps to magnify the image on mouse hover. Currently it is only work if z is pressed and hover on image.

To implement this directive, you need to add magnify attribute to the image tag.

import { Magnify } from '@ngu/magnify';

@NgModule({
  Imports: [
    Magnify
  ]
})
export class AppModule {}

Or You can use it on standalone component.

import { Magnify } from '@ngu/magnify';

@Component({
  standalone: true,
  imports: [
    Magnify
  ],
  selector: 'app',
  ...
})

<img src="image.jpg" magnify />

<!-- You can make the inline false (Default: true) -->
<img src="image.jpg" magnify [inline]="false" [scale]="3" />

<!-- You can specify different image too -->
<img src="thumnail.jpg" magnify="original.jpg" />