CODEWITHSUNDEEP
angularnativescriptmobile-applicationangular-nativescript
PrabhuPrakash
PrabhuPrakash

Reputation: 261

Image zoom issue in angular nativescript

I am trying image zoom in my angular app with "nativescript-photo-zoom" and nativescript-image-zoom but its throwing "PhotoDraweeView is not a constructor error" can anyone help me?

my code html: 

    <PhotoZoom [src]="photoUrl" (finalImageSet)="onFinalImageSet($event)" (failure)="onFailure($event)"  (scaleChanged)="onScaleChanged($event)"></PhotoZoom> 
    </GridLayout>

ts:

@Component({ selector: "ns-details", moduleId: module.id, templateUrl: "./item-detail.component.html", }) export class ItemDetailComponent implements OnInit {

public photoUrl="https:// vignette.wikia.nocookie.net/inuyasha/images/b/b5/ Inuyasha.png";

constructor() { }

ngOnInit(): void {
    const id = +this.route.snapshot.params["id"];
    this.item = this.itemService.getItem(id);
}

onFinalImageSet(event) {
    console.log("onFinalImageSet: ", event);
}

onFailure(event) {
    console.log("onFailure: ", event);
}

onScaleChanged(event) {
    console.log("onScaleChanged: ", event.object.zoomScale);
}

}

app.module

import { NativeScriptUIPhotoZoomModule } from "nativescript-photo-zoom/angular";

@NgModule({

imports: [
    NativeScriptModule,
    AppRoutingModule,
    NativeScriptUIPhotoZoomModule
],

})

export class AppModule { }

Upvotes: 0

Views: 514

Answers (1)

Sheikh Muhammad Umar
Sheikh Muhammad Umar

Reputation: 56

Try using ng-img-magnifier npm package. Here is a working DEMO. Very easy to implement and fully customizable.

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'>
</ng-img-magnifier>

Upvotes: 0

Related Questions