An image zoom library for Angular projects.
Ngx-uc is currently under development and there is still no official releases yet. All initial alpha releases (all 0.x.x versions) can have breaking changes. Try it at your own risk.
The changelog details the progress of the work.
You can see the ngx-uc documentation in the official site.
A live demo is available to demonstrate usage examples of the ngx-uc library components. The source code of the examples is also available if you want to play with it.
-
To install the ngx-uc, open a terminal and at the root of your project, run:
npm install ngx-uc
-
Import the style in your
angular.json
file in the styles entry (project > architect > build > styles):"styles": [ "node_modules/ngx-uc/resources/uc.css", "src/styles.css" ]
-
Import the module:
import { NgModule } from '@angular/core'; import { NgxUcModule } from 'ngx-uc'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, NgxUcModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
In a template, add the
uc-zoom-view
directive to an image tag:<img src="your-image.jpg" uc-zoom-view >
Code and documentation copyright 2021 Fabio M. Blanco. Code released under the MIT License