search

jpilfold / ngx-image-viewer

An image viewer component for Angular 2+
MIT License
49 stars 54 forks source link

Fullscreen and Component selector #10

Closed tmburnell closed 6 years ago

tmburnell commented 6 years ago

I have a need where I need to select the element that is getting full screened. I was trying to do this without having to expose a new binding; by using ViewChild, however have been unsuccessful so far.

So i tried this:

import {ImageViewerComponent} from 'ngx-image-viewer/ngx-image-viewer';
...
@ViewChild(ImageViewerComponent) viewContainerRef: ImageViewerComponent;

However I get the following error

ERROR in src/app/view-image.component.ts(6,9): error TS2305: Module '"/Users/######/dev/static/node_modules/ngx-image-viewer/ngx-image-viewer"' has no exported member 'ImageViewerComponent'.

I have tried several other selectors, and have been unsuccessful in being able to select the component. Do you have an answer, or should i do another pull request and and expose it?

Side Note: Why does ngx-image-view.d.ts not export all ... instead of specific modules? because it does not export all i have to pull config like this:

import {ImageViewerConfig, CustomEvent} from 'ngx-image-viewer/src/app/image-viewer/image-viewer-config.model';
jpilfold commented 6 years ago

Hi,

I've changed public_api.ts, so it will export ImageViewerComponent, ImageViewerConfig, and CustomEvent, and you'll be able to import from 'ngx-image-viewer/ngx-image-viewer';

It may be a couple of hours until I get to publish the change, but I'll add a message on this thread when it's done.

tmburnell commented 6 years ago

just confirming will you be making it look like this?

export * from './public_api';
export * from './src/app/image-viewer/fullscreen.directive';
export * from './src/app/image-viewer/image-viewer-config.model';
export * from './src/app/image-viewer/image-viewer.component';
jpilfold commented 6 years ago

Not quite, check out https://github.com/jpilfold/ngx-image-viewer/blob/master/public_api.ts to see the change. It'll be:

export * from './src/app/image-viewer/image-viewer.module';
export { ImageViewerComponent } from './src/app/image-viewer/image-viewer.component';
export { ImageViewerConfig, CustomEvent } from './src/app/image-viewer/image-viewer-config.model';
tmburnell commented 6 years ago

I still could not get it to use ImageViewerComponet as a selector but that does resolve the config stuff.

but I did end up being able to write this to select what i needed:

this.elementRef.nativeElement.querySelector('.img-container')
jpilfold commented 6 years ago

Okay, well I've deployed the change anyway. Are you happy for this ticket to be closed?