ngx-uc

An image zoom library for Angular projects.

View on GitHub

ngx-uc logo

Project status

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.

Documentation

Examples

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.

Getting Started

  1. To install the ngx-uc, open a terminal and at the root of your project, run:
    npm install ngx-uc
    
  2. 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"
    ]
    
  3. 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 { }
    
  4. In a template, add the uc-zoom-view directive to an image tag:
    <img src="your-image.jpg" uc-zoom-view >