Can't bind to 'options' since it isn't a known property of 'input'

[itdsntwork]

hi. I follow the example and I get this error. I guess it's my fault but please help. I am using rc.5

[jkuri]

that usualy means you forgot to include UPLOAD_DIRECTIVES into NgModule declarations array.

[Kbalz]

I'm also struggling with this error. Using 2.0 release.

systemjs.config.js

` (function (global) { System.config({ paths: { // paths serve as alias 'libs:': 'libs/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'libs:@angular/core/bundles/core.umd.js', '@angular/common': 'libs:@angular/common/bundles/common.umd.js', '@angular/compiler': 'libs:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'libs:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'libs:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'libs:@angular/http/bundles/http.umd.js', '@angular/router': 'libs:@angular/router/bundles/router.umd.js', '@angular/forms': 'libs:@angular/forms/bundles/forms.umd.js',

        // other libraries
        'rxjs': 'libs:rxjs',
        'ng2-uploader': 'libs:ng2-uploader'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        'ng2-uploader':     { main: 'ng2-uploader.js', defaultExtension: 'js' },
    }
});

})(this); `

app.module.ts

`/// import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser';

import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';

import { AppComponent } from './app.component'; import { WelcomeComponent } from './welcome.component'; import { MonthComponent } from './month.component'; import { routing } from './app.routes';

@NgModule({ imports: [ BrowserModule, routing, CommonModule, FormsModule ], declarations: [ AppComponent, WelcomeComponent, MonthComponent, UPLOAD_DIRECTIVES ], entryComponents: [AppComponent], bootstrap: [AppComponent],

}) export class AppModule { }`

component using

`import { Component, OnInit, NgZone } from '@angular/core';

@Component({ selector: 'month', templateUrl: 'views/month.component.html' }) export class MonthComponent implements OnInit {

private fileUploader_Zone: NgZone;
private fileUploader_BasicOptions: Object;
private fileUploader_Progress: number;
private fileUploader_Response: any = {};

ngOnInit() {
    this.fileUploader_Zone = new NgZone({ enableLongStackTrace: false });
    this.fileUploader_BasicOptions = {
        url: 'http://api.ng2-uploader.com:10050/upload' };
}

handleUpload(data: any): void {
    this.fileUploader_Zone.run(() => {
        this.fileUploader_Response = data;
        this.fileUploader_Progress = data.progress.percent / 100;
    });
}

}`

`<input type="file" ngFileSelect [options]="fileUploader_BasicOptions" (onUpload)="handleUpload($event)">

Response: {{ response | json }}

Progress: {{ progress }}%

`

[jkuri]

Please make sure you include this module into NgModule.

[Kbalz]

Yes I think I have that, it is like this:

@NgModule({ imports: [ BrowserModule, routing, CommonModule, FormsModule ], declarations: [ AppComponent, WelcomeComponent, MonthComponent, UPLOAD_DIRECTIVES ],

[Kbalz]

I think my problem lies in the systemjs.config.js - can you please post how a proper reference should look? I know that may be outside of the scope for this project, but it may help as many of us learn Angular2 as well.

[chrizy]

Having the same issue using 2.0.0 release, with CLI (webpack). UPLOAD_DIRECTIVES is included in my app module.

[oluosiname]

Having same issue here as well

[danielserrao]

Same problem here

[lipinets]

I have the same. Please help to solve. Can't bind to 'options' since it isn't a known property of 'input'. (" <input type="file" ngFileSelect [ERROR ->][options]="basicOptions" (onUpload)="handleUpload($event)">

[fxcosta]

Same problem here!

[Nogostradamus]

Same problem. Angular version 2.1.0 (webpack)

[joelflint]

Same problem! Thx!

[lipinets]

Dear Developers, could you please advice us something or fix? A lot of people here with the same problem. Thank you!

[MaxiSantos]

Same issue here. Those ones who have this issue.. do you have more than 1 module in your app?

[Nogostradamus]

Just one module in my case.

[lipinets]

I have more then 1 module.

[MaxiSantos]

Ok, I think there is an issue here. First I thought the issue was related on how we are importing this Directive within the modules (I have more than one module and I thougth I was making some mistake there but based on some commets it looks the issue is present even with one module)

So I went to debbug the directive and I made this test. I removed the [options] attribute since the problem was there. Then I went to NgFileSelectDirective on ng-file-select.ts and set a breakpoint on

this.uploader.setOptions

And woala ! The breakpoint hit there so I think the directive is correctly imported, right? (because [options] does not longer exist you need to provide something there, otherwise it will complain later because of its undefined value)

After I set options to an empty object then I wanted to know if the event binding (onUpload) was correct or there were some issue there and it did work, it call my handler. Of course this didn't work because there was no url property.

Perhaps the way the options property is declared is somehow incorrect? It's using a getter/setter method.

NOTE: I'm using angular 2.2.0

[Abinayats]

Hi,

Thanks @MaxiSantos for the great solution. It works for me :)

[VijayRidgeant]

I got this error when i create echart . please solve

compiler.js:2426 Uncaught Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'div'. ("

User And Admin Commission Details

<div echarts [ERROR ->][options]="chartOption4" class="demo-chart" >

[poojasharma1993]

you just need to import MatProgressButtonsModule as below

import { MatProgressButtonsModule } from 'mat-progress-buttons';