@Input decorator not working at all

Question

I've been developing Angular apps some time already (especially now in the 5th version), and never found this problem before. Basically, I´ve got the following component...:

@Component({
  selector: 'super-table',
  templateUrl: './supertable.html',
  styleUrls: ['./supertable.css'],
  providers: [TableFormat]
})
export class SuperTable implements OnInit {

  @Input() defaultColumn;
  @Input() config;
  table: CrossSectionTable_controller;

... which receives this "config" object from outside. No problems with that approach; used it in all my components this far and it never gave any error. Now, when I try to use my table, I get an error:

  <div class="center-component"> 
    <super-table  [config]="config" [defaultColumn]="'kpi_expected_realized'">
    </super-table>
  </div>

ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'config' since it isn't a known property of 'super-table'. 1. If 'super-table' is an Angular component and it has 'config' input, then verify that it is part of this module. 2. If 'super-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
  <div class="center-component"> 

    <super-table  [ERROR ->][config]="config" [defaultColumn]="'kpi_expected_realized'">

    </super-table>

  </div>
"): ng:///AchievedCombined_Module/AchievedCombined.html@36:22 Can't bind to 'defaultColumn' since it isn't a known property of 'super-table'. 1. If 'super-table' is an Angular component and it has 'defaultColumn' input, then verify that it is part of this module. 2. If 'super-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("mponent-separator">
  <div class="center-component"> 

    <super-table  [config]="config" [ERROR ->][defaultColumn]="'kpi_expected_realized'">

    </super-table>

  </div>
"): ng:///AchievedCombined_Module/AchievedCombined.html@36:40 'super-table' is not a known element: 1. If 'super-table' is an Angular component, then verify that it is part of this module. 2. If 'super-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div class="center-component"> 

    [ERROR ->]<super-table  [config]="config" [defaultColumn]="'kpi_expected_realized'">

    </super-table>
"): ng:///AchievedCombined_Module/AchievedCombined.html@36:8 syntaxError@webpack-internal:///../../../compiler/esm5/compiler.js:684:34 TemplateParser.prototype.parse@webpack-internal:///../../../compiler/esm5/compiler.js:24547:19 JitCompiler.prototype._parseTemplate@webpack-internal:///../../../compiler/esm5/compiler.js:33975:16 JitCompiler.prototype._compileTemplate@webpack-internal:///../../../compiler/esm5/compiler.js:33950:18 JitCompiler.prototype._compileComponents/<@webpack-internal:///../../../compiler/esm5/compiler.js:33852:56 JitCompiler.prototype._compileComponents@webpack-internal:///../../../compiler/esm5/compiler.js:33852:9 JitCompiler.prototype._compileModuleAndComponents/<@webpack-internal:///../../../compiler/esm5/compiler.js:33722:13 then@webpack-internal:///../../../compiler/esm5/compiler.js:673:77 JitCompiler.prototype._compileModuleAndComponents@webpack-internal:///../../../compiler/esm5/compiler.js:33721:16 JitCompiler.prototype.compileModuleAsync@webpack-internal:///../../../compiler/esm5/compiler.js:33637:32 CompilerImpl.prototype.compileModuleAsync@webpack-internal:///../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js:244:34 SystemJsNgModuleLoader.prototype.loadAndCompile/<@webpack-internal:///../../../core/esm5/core.js:6637:44 ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:392:17 onInvoke@webpack-internal:///../../../core/esm5/core.js:4825:24 ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17 Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:142:24 scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:873:52 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17 onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4816:24 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17 Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28 drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:602:25 ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:503:21 invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9 globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17

Stack trace: resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:824:31 resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:795:17 scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:873:17 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:425:17 onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4816:24 ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:424:17 Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:192:28 drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:602:25 ZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:503:21 invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1540:9 globalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1566:17

As you see, it's happening too with the other Input variable...

What is going on here? Why doesn't this work?

Read this answer https://stackoverflow.com/questions/46911583/browseranimationsmodule-does-not-work-when-imported-in-core-module/46914178#46914178 — yurzui, Jan 18 '18 at 15:19
@Zerok have you added `SuperTable` to corresponding module's `declarations` list ? — tchelidze, Jan 18 '18 at 15:24
@tchelidze You are right! How could I forget that... fixed now! — Zerok, Jan 18 '18 at 15:40

score 1 · Accepted Answer · answered Jan 18 '18 at 15:48

1

Make sure you add SuperTable component to corresponding module's declarations list .

@NgModule({
 declarations: [
    SuperTable
 ]
})
export class AppModule {}

answered Jan 18 '18 at 15:48

tchelidze

7,334
1
25
44

@Input decorator not working at all

1 Answers1