CODEWITHSUNDEEP
angular
Machtyn
Machtyn

Reputation: 3282

can't bind to input var since it isn't a known property of component

I'm using angular 2.3. And, yes, I've seen the half dozen or so other similar questions, but I could not find an answer in any of them to fix my problem.

I have a component called LabelSpanComponent:

// label-span.component.ts
import {Component, Input} from "@angular/core";
import {LabelSpan} from "../models/label-span";

@Component({
    selector: 'label-span',
    template: `
        <label *ngIf="entry.labelValue">{{entry.labelValue}} </label>
        <span>{{entry.spanValue}}</span>`
})
export class LabelSpanComponent {
    @Input() entry: LabelSpan
}

LabelSpan is:

// label-span.ts
export interface LabelSpan {
    labelValue: string,
    spanValue: string
}

And this worked fine when I used it on a page. But when I tried to use it in two different pages, each with their own module, I got an error from angular:

Type LabelSpanComponent is part of the declarations of 2 modules: ThisDetailModule and ThatDetailModule! Please consider moving LabelSpanComponent to a higher module that imports ThisDetailModule and ThatDetailModule. You can also create a new NgModule that exports and includes LabelSpanComponent then import that NgModule in ThisDetailModule and ThatDetailModule.

So, I decided that I should probably create an module for LabelSpanComponent:

// label-span.module.ts
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {LabelSpanComponent} from "./label-span.component";

@NgModule({
    imports: [
        FormsModule,
        BrowserModule
    ],
    declarations: [
        LabelSpanComponent
    ],
    providers:    [  ]
})
export class LabelSpanModule { }

And I added this module to app.module.ts:

// app.module.ts
/* other imports */
import {LabelSpanModule} from "./templates/label-span.module";

@NgModule({
    imports: [
        /* other modules */
        LabelSpanModule
    ],
    declarations: [ AppComponent ],
...
})
export class AppModule{ }

In both ThisDetailModule and ThatDetailModule, I have also included the LabelSpanModule as part of their imports. However, I am getting the following errors:

Can't bind to 'entry' since it isn't a known property of 'label-span'. 1. If 'label-span' is an Angular component and it has 'entry' input, then verify that it is part of this module.

Ah, for what it's worth, here is how it is utilized in the html page:

<label-span id="the-id" [entry]="myVar"></label-span>

Where in the component file for the page, I have:

myVar = { labelValue: "The Label", spanValue: "The Span" }

What am I missing or doing wrong?

Upvotes: 4

Views: 16541

Answers (2)

Tudor
Tudor

Reputation: 2716

It can also happen if you use the wrong component name. Say for instance you have

<app-my-component [myProperty]="helloWorld"></app-my-component>

But in the selector you only have:

@Component({
    selector : 'my-component'
})

Note that the app- is missing in the @Component. It will say it doesn't know the property, but in fact it's an unknown component alltogether.

Upvotes: 1

eko
eko

Reputation: 40677

You need to export the component

@NgModule({
    imports: [
        FormsModule,
        BrowserModule
    ],
    declarations: [
        LabelSpanComponent
    ],
    exports: [LabelSpanComponent]
    providers:    [  ]
})
export class LabelSpanModule { }

Check Shared Module section on docs for useful info: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

Upvotes: 7

Related Questions