hallysonh / ngx-imageviewer

Angular 5 Image Viewer Component based on Canvas
MIT License
84 stars 52 forks source link

Unable to pass custom config to the ImageViewerComponent #61

Open HowardMed opened 5 years ago

HowardMed commented 5 years ago

Hi the ImageViewerComponent(ngx-imageviewer) only accepts custom ImageViewerConfig via providers array in @Component.

It works like this:

in wrapper-imageviewer.component.ts (my own custom class)

const MY_IMAGEVIEWER_CONFIG: ImageViewerConfig = {
  buttonStyle: {
    bgStyle: '#B71C1C' // custom container's background style
  }
};

@Component({
  selector: 'mtab-imageviewer',
  templateUrl: './imageviewer.component.html',
  styleUrls: ['./imageviewer.component.scss'],
  providers: [
    {
      provide: IMAGEVIEWER_CONFIG,
      useValue: MY_IMAGEVIEWER_CONFIG
    }
  ]
})

in ImageViewerComponent (by ngx-imageviewer)

constructor(
    private _sanitizer: DomSanitizer,
    private _renderer: Renderer2,
    private _imageCache: ImageCacheService,
    @Inject(IMAGEVIEWER_CONFIG) private config: ImageViewerConfig
  ) {
     // code here...
}

The above code works perfectly fine, but the thing is I am getting custom config from another component via @Input() decorator in my wrapper class, is there a way I can pass the input config to the parent ImageViewerComponent(ngx-imageviewer) class? Also, I need to make sure in case the incoming config property changes the ImageViewerComponent's config property changes as well.