RedZoom

RedZoom is a modern very easy-to-use image zoom library which made as Angular directive and fully stylable via CSS/SCSS.

Examples, documentation, changelog are available here.

Getting Started

1. To install RedZoom, run the command below:

   npm install ngx-red-zoom

2. Import the RedZoomDirective in the component where you want to use it:

   import { RedZoomDirective } from 'ngx-red-zoom';
   
   @Component({
       selector: 'app-root',
       imports: [
           RedZoomDirective,
       ],
       templateUrl: './app.html',
       styleUrl: './app.scss',
   })
   export class App { }

3. Import styles:

   @use 'ngx-red-zoom/styles/base.scss';
   @use 'ngx-red-zoom/styles/style-window.scss';

4. Add directive to your image tag:

   <img
       src="example.jpg"
       redZoom="example.full.jpg"
       redZoomClass="red-zoom--style--window"
   >