So from reading two threads here I understood what my problem was - but I was wondering - why this is the answer ?
I’ll start with the problem-solution, then I’ll ask the question
So my problem was:
Can't bind to 'uploader' since it isn't a known property of 'input' what make sense to me was importing it here:
- app.module.ts (
import { FileUploadModule } from 'ng2-file-upload';) - components.module.ts (
import { FileUploadModule } from 'ng2-file-upload';)
The solution I found was:
- Removing the import from
components.module.ts - Adding it to the PAGE module (
contact-person.module.ts)
That solved it for me, the question is WHY ?!
I thought the whole point of having components, is that they are stand-alone kind of tags that I can import it wherever I need, example:
# contact-person.html
<ion-content>
<photo-upload></photo-upload>
</ion-content>
# photo.upload.html
# which doesn't have a photo.upload.module.ts but is exported in the global components.module.ts file
# has:
<input
type="file"
id="fileupload"
ng2FileSelect
[style.display]="'none'"
[uploader]="uploader"
(change)="readUrl($event)" />
W/o the [uploader]="uploader" - the project is able to render, but with it - it doesn’t ( solution was above )
But WHY ?! I want my component to be independed, why I need to import the FileUploadModule in every page where I use the <photo-upload></photo-upload> tags, doesn’t make sense to me
Any thoughts ?