CODEWITHSUNDEEP
angulartypescript
Lydon
Lydon

Reputation: 2975

Can't bind to 'x' since it isn't a known property of 'y'

I have an angular site that contains a component inside another component. I'm using routing and lazy loading the outer component (ComponentA). The inner component (ComponentB) depends on a 3rd party directive.

Here's the proof of concept (open the console to see the error).

I'm getting an error when using the 3rd party directive inside ComponentB. This isn't an error with the directive itself but an error with how I've structured my code.

<tree-root [nodes]="nodes"></tree-root>

Can't bind to 'nodes' since it isn't a known property of 'tree-root'

I can solve this issue by importing the 3rd party module in the ComponentA but since ComponentA doesn't depend on this module, it feels wrong to do so.

The Plunker I have created is a very small portion of my app, designed to isolate the issue. It's to demonstrate a concept, not to make sense as an app. What I'm trying to achieve is to create a component that can be added to any of my pages. This component could be a widget or something, added to one or more parent pages. It is self contained.

My limited knowledge in Angular is starting showing here. Since components are supposed to allow us to do component based development breaking our application into smaller parts, I don't understand why ComponentA needs to know what dependencies ComponentB has in order to use it in its view.

I'll also demonstrate that this is only an issue because I have a 3rd party directive included in ComponentB. If I remove the directive, all works. For example if I did something like this instead:

<ul>
    <li *ngFor="let node of nodes">
        {{ node.name }}
    </li>
</ul>

the app runs fine with no errors.

What have I done wrong and what should I be doing differently? If the solution is to add an import to ComponentA, I will accept that as an answer given a good explanation is provided (such as why *ngFor works but the tree-root directive doesn't).

Upvotes: 48

Views: 70482

Answers (5)

Kevin Beal
Kevin Beal

Reputation: 10849

You can get this error on directives where you are binding to the attribute that attaches the directive itself, but has the corresponding Input decorated incorrectly.

@Directive({ selector: '[myDirective]' })
export class MyDirective {
    @Input('mydirectiveSpelledDifferently') data: any;
}

The input in the example has "mydirectiveSpelledDifferently" but it should be matching the selector (i.e. "myDirective").

You'll know this is the issue in your case when it works this way:

<div myDirective>

But fails this way:

<div [myDirective]="something">

The working case is correctly finding the selector you chose for your directive. The failing case is looking for the @Input() decoration and failing to because it doesn't exist as @Input('myDirective') on your directive.

Upvotes: 3

HelloWorldPeace
HelloWorldPeace

Reputation: 1395

Had a similar scenario to MMalke. By default Angular adds the prefix app- to the selector name of a component when the component is generated via the command line interface. I should have written <app-my-component><app-my-component> but I wrote <my-component><my-component> instead. FYI, check to make sure the component's selector name matches what's in your HTML.

Upvotes: 0

MMalke
MMalke

Reputation: 2106

I just experienced the same, and the problem was that I had the wrong case ('a' vs 'A') for the component.

In my parent component's template, I had:

<mychild-component></mychild-component>

Instead of

<myChild-component></myChild-component>

Upvotes: 1

Lydon
Lydon

Reputation: 2975

I went back to the start and realised what I missed:

In feature-b.module.ts I should have exported the component:

exports: [
    FeatureBComponent
]

It was also necessary for me to import FeatureBModule rather than FeatureBComponent.

import { FeatureBComponent } from '../feature-b/feature-b.component';

import { FeatureBModule } from '../feature-b/feature-b.module';

Upvotes: 64

DeborahK
DeborahK

Reputation: 60518

I was able to get the application running by removing FeatureBModule entirely. Then the FeatureAModule is correct as it needs to then delcare FeatureBComponent.

The FeatureAModule then looks like this:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';

import { FeatureAComponent }           from './feature-a.component';
import { FeatureARoutingModule }       from './feature-a-routing.module';
import { TreeModule }                  from 'angular-tree-component';

import { FeatureBComponent } from '../feature-b/feature-b.component';

@NgModule({
  imports: [
    CommonModule,
    FeatureARoutingModule,
    TreeModule
  ],
  declarations: [
    FeatureAComponent,
    FeatureBComponent
  ]
})
export class FeatureAModule {}

I updated the plunker here: https://plnkr.co/edit/mkGH5uG1FGsWWpWbS1Zw?p=preview

Upvotes: 3

Related Questions