RedZoom is a modern very easy-to-use image zoom library which made as Angular directive and fully stylable via CSS/SCSS
npm install ngx-red-zoomRedZoom 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.
1. To install RedZoom, run the command below:
``bash`
npm install ngx-red-zoom
`
2. Import the RedZoomDirective in the component where you want to use it:
typescript
import { RedZoomDirective } from 'ngx-red-zoom';
@Component({
selector: 'app-root',
imports: [
RedZoomDirective,
],
templateUrl: './app.html',
styleUrl: './app.scss',
})
export class App { }
``
3. Import styles:
scss`
@use 'ngx-red-zoom/styles/base.scss';
@use 'ngx-red-zoom/styles/style-window.scss';
`
4. Add directive to your image tag:
angular2html``
src="example.jpg"
redZoom="example.full.jpg"
redZoomClass="red-zoom--style--window"
>