Angular2 RC5 Can t bind to Property X since it isn t a known property of Child Component

Question

I have a small Angular2 project based on the Angular2 Seed project that I am trying to upgrade to Angular2 RC5    My project has a few features  one of them called home  Home component uses a child component called create-report-card-form  I have declared both the home and create-report-card-form components in the home module  see code below  and get this error      Unhandled Promise rejection  Template parse errors  Can t bind to    currentReportCardCount  since it isn t a known property of    create-report-card-form           If  create-report-card-form  is an Angular component and it has     currentReportCardCount  input  then verify that it is part of this module       Project structure  -app     - app module ts     - app component ts     -  home         - home module ts          - home component ts         - home component html         - create-report-card-form component ts         - create-report-card-form component html     -   lt other  features  gt      - shared         - shared module ts   home module  import   NgModule   from   angular core   import   CommonModule   from   angular common   import  ReactiveFormsModule  from   angular forms    import   SharedModule   from     shared shared module   import   DataService   from     shared services index   import   HomeComponent   from    home component   import   CreateReportCardFormComponent   from    create-report-card-form component     NgModule       imports   CommonModule  SharedModule  ReactiveFormsModule       declarations   HomeComponent  CreateReportCardFormComponent       exports   HomeComponent  CreateReportCardFormComponent       providers   DataService      export class HomeModule       app module  import   NgModule   from   angular core   import   BrowserModule   from   angular platform-browser   import   APP BASE HREF   from   angular common   import   RouterModule   from   angular router   import   HttpModule   from   angular http   import   AppComponent   from    app component   import   routes   from    app routes    import   AboutModule   from     about about module   import   HomeModule   from     home home module   import  TestModule  from     test test module   import  VoteDataEntryModule  from     vote-data-entry vote-data-entry module   import   SharedModule   from    shared shared module     NgModule     imports   BrowserModule  HttpModule  RouterModule forRoot routes   AboutModule  HomeModule      TestModule  VoteDataEntryModule  SharedModule forRoot       declarations   AppComponent     providers         provide  APP BASE HREF      useValue    lt    APP BASE   gt           bootstrap   AppComponent       export class AppModule       create-report-card-form component ts  import   Component  Input  Output  EventEmitter  OnInit  from   angular core   import   FormBuilder  FormGroup  FormControl   from   angular forms      import   Dialog  Dropdown  SelectItem  Header  Footer  Messages  Message   from  primeng primeng   import   SelectItem  Message   from  primeng primeng    import  ReportCard  ReportCardDataSource  from     shared index   import  CREATE REPORT CARD FORM HEADING  EDIT REPORT CARD FORM HEADING  from    constants     Component       moduleId  module id      selector   create-report-card-form       templateUrl   create-report-card-form component html     export class CreateReportCardFormComponent implements OnInit         Input   public reportCardDataSourcesItems  SelectItem         Input   public reportCardYearItems  SelectItem         Input   errorMessages  Message          Output   reportCardCreated   new EventEmitter lt ReportCard gt          Output   editReportCardFormValueChanged   new EventEmitter lt ReportCard gt          public editReportCardForm  FormGroup      private selectedReportCardDataSourceIdControl  FormControl      private selectedReportCardYearControl  FormControl          TODO  remove this hack for resetting the angular 2 form once a real solution is available  supposedly in RC5      private isFormActive  boolean   true      private formHeaderString  string   CREATE REPORT CARD FORM HEADING      private formDialogVisible  boolean   false      private isCreatingNewReportCard   false      false implies that we are updating an existing report card      constructor private fb  FormBuilder               configureForm selectedReportCard  ReportCard  createNewReport  boolean            this isCreatingNewReportCard   createNewReport           this resetForm             this selectedReportCardDataSourceIdControl updateValue selectedReportCard reportCardDataSource reportCardSourceId            this selectedReportCardYearControl updateValue selectedReportCard reportCardYear            if  createNewReport                this formHeaderString   CREATE REPORT CARD FORM HEADING            else                  updating an existing report card             this formHeaderString   EDIT REPORT CARD FORM HEADING                   selectedReportCard reportCardYear         selectedReportCard reportCardDataSource reportCardSourceName                     this editReportCardForm valueChanges subscribe data   gt  this onFormValueChanged data               customGroupValidator reportCardDataSourceIdControl  FormControl  reportCardYearControl  FormControl          isCreatingNewReportCard  boolean            return  group  FormGroup      key  string   any     gt                    missing data error                 if   reportCardDataSourceIdControl value     reportCardYearControl value                    return    requiredDataError    Report card year AND provider must be selected                                    invalid data error                 if  isCreatingNewReportCard                    if   reportCardDataSourceIdControl touched     reportCardYearControl touched                        return    requiredDataError    Report card year AND provider must be selected                                      else                   if   reportCardDataSourceIdControl touched  amp  amp   reportCardYearControl touched                        return    requiredDataError    Report card year OR provider must be selected                                                      return null to indicate the form is valid             return null                        hideFormDialog             this formDialogVisible   false             showFormDialog                hide any previous errors         this errorMessages               this formDialogVisible   true             createForm                by default  configure the form for new report card creation by setting            the initial values of both dropdowns to empty string         this selectedReportCardDataSourceIdControl   new FormControl              this selectedReportCardYearControl   new FormControl               this editReportCardForm   this fb group               selectedReportCardDataSourceIdControl  this selectedReportCardDataSourceIdControl              selectedReportCardYearControl  this selectedReportCardYearControl                              validator  this customGroupValidator this selectedReportCardDataSourceIdControl  this selectedReportCardYearControl                      this isCreatingNewReportCard                   asyncValidator  this duplicateReportCardValidator bind this                             duplicateReportCardValidator             return new Promise resolve   gt                 if   this errorMessages   amp  amp  this errorMessages length     0                    resolve   uniqueReportCard  true                   else                   resolve null                                        showError errorMessages  Message              this errorMessages   errorMessages             ngOnInit             this createForm               onEditReportCardFormSubmitted              let newReportCard   this getReportCard              this selectedReportCardDataSourceIdControl value              this selectedReportCardYearControl value              this reportCardDataSourcesItems                     this reportCardCreated emit newReportCard              resetForm             this createForm            this isFormActive   false          setTimeout      gt  this isFormActive   true  0              onFormValueChanged data  any            let newReportCard   this getReportCard              this selectedReportCardDataSourceIdControl value              this selectedReportCardYearControl value              this reportCardDataSourcesItems                     this editReportCardFormValueChanged emit newReportCard              private getReportCard reportCardDataSourceIdString  string  reportCardYearString  string          reportCardDataSourceItems  SelectItem     ReportCard            let selectedReportCardYear  number   Number reportCardYearString           let selectedProviderReportCardId  number   Number reportCardDataSourceIdString            let selectedProviderReportCardName  string    Unknown Report Card            for  var i   0  i  lt  this reportCardDataSourcesItems length  i                  var element   this reportCardDataSourcesItems i               if  Number element value      selectedProviderReportCardId                    selectedProviderReportCardName   element label                  break                                   let reportCard  ReportCard   new ReportCard             reportCard reportCardYear   selectedReportCardYear           reportCard reportCardDataSource   new ReportCardDataSource              selectedProviderReportCardId              selectedProviderReportCardName                     return reportCard            create-report-card-form component html   lt p-dialog header   formHeaderString     visible    formDialogVisible   responsive   true  showEffect  fade        modal   true  width  400  gt       lt form  ngIf  isFormActive   formGroup   editReportCardForm   ngSubmit   onEditReportCardFormSubmitted    gt           lt div class  ui-grid ui-grid-responsive ui-fluid    ngIf  reportCardDataSourcesItems   gt               lt div class  ui-grid-row   gt                   lt p-dropdown  options   reportCardDataSourcesItems  formControlName  selectedReportCardDataSourceIdControl   autoWidth   true  gt  lt  p-dropdown gt               lt  div gt               lt div class  ui-grid-row   gt                   lt p-dropdown  options   reportCardYearItems  formControlName  selectedReportCardYearControl   autoWidth   true  gt  lt  p-dropdown gt               lt  div gt               lt div class  ui-grid-row   gt                   lt p-messages  value   errorMessages  gt  lt  p-messages gt               lt  div gt               lt footer gt                   lt div class  ui-dialog-buttonpane ui-widget-content ui-helper-clearfix   gt                       lt button type  submit  pButton icon  fa-check                         disabled    editReportCardForm  valid  label  Save   gt  lt  button gt                   lt  div gt               lt  footer gt           lt  div gt       lt  form gt   lt  p-dialog gt    home component ts  import   Component  OnInit  ViewChild   from   angular core         import   REACTIVE FORM DIRECTIVES   from   angular forms      import  ROUTER DIRECTIVES  from   angular router      import   InputText  Panel  SelectItem  Message  Growl  Dialog  DataTable  Column  Header  Footer  Tooltip   from  primeng primeng   import   Message  SelectItem   from  primeng primeng    import  CreateReportCardFormComponent  from    create-report-card-form component   import   ReportCardDataSource  ReportCard  ProviderData  DataService     DUPLICATE REPORT CARD MESSAGE   from     shared index   import  ReportCardCommands  from    enums           This class represents the lazy loaded HomeComponent       Component     moduleId  module id    selector   sd-home     templateUrl   home component html     styleUrls    home component css        directives   CreateReportCardFormComponent      export class HomeComponent implements OnInit      public growlMessages  Message           public createReportCardError  Message           public reportCardDataSourcesItems  SelectItem        label   Select Provider   value           public reportCardYearItems  SelectItem        label   Select Year   value           public providerData  ProviderData   new ProviderData      public displayReportCardDeleteConfirmation  boolean   false     private isCreatingNewReportCard  boolean   true    private selectedReportCard  ReportCard      ViewChild CreateReportCardFormComponent    private createReportCardFormComponent  CreateReportCardFormComponent     constructor private dataService  DataService         ngOnInit         let reportCardDataSources  ReportCardDataSource     this dataService getReportCardDataSources         for  var i   0  i  lt  reportCardDataSources length  i            var element   reportCardDataSources i         this reportCardDataSourcesItems push   label  element reportCardSourceName  value  element reportCardSourceId               retrieve data from localStorage if available       this providerData   this dataService getProviderData                  initialize report card years     const minYear  number   2000         TODO  maxYear should be sourced from the server by a service     let maxYear  number    new Date    getFullYear         for  var i   maxYear  i  gt   minYear  i--          this reportCardYearItems push   value  i toString    label  i toString                       Returns the index of the report card in providerData reportCards that has the same reporCardSourceId      and reportCardYear as selectedReportCard  or -1 if there is no match    indexOf selectedReportCard  ReportCard   number       return this providerData reportCards findIndex x   gt        x reportCardDataSource reportCardSourceId     selectedReportCard reportCardDataSource reportCardSourceId  amp  amp        x reportCardYear     selectedReportCard reportCardYear          onReportCardCreated newReportCard  ReportCard        if  newReportCard           if   this indexOf newReportCard   gt  -1                attemp to create a duplicate report card  show error         this setCreateReportCardFromErrorMessage DUPLICATE REPORT CARD MESSAGE           else           if  this isCreatingNewReportCard                 save new report card           this createReportCardError                 this createReportCardFormComponent hideFormDialog              this providerData reportCards splice 0  0  newReportCard              this createReportCardFormComponent hideFormDialog               else                update existing report card           let reportCardToUpdateIndex  number   this indexOf this selectedReportCard              if  reportCardToUpdateIndex  gt  -1                this providerData reportCards reportCardToUpdateIndex  reportCardDataSource reportCardSourceId                 newReportCard reportCardDataSource reportCardSourceId              this providerData reportCards reportCardToUpdateIndex  reportCardDataSource reportCardSourceName                 newReportCard reportCardDataSource reportCardSourceName              this providerData reportCards reportCardToUpdateIndex  reportCardYear                 newReportCard reportCardYear                                this dataService storeProviderData this providerData           this isCreatingNewReportCard   true          this clearCreateReportCardFormErrorMessage            this createReportCardFormComponent hideFormDialog                         editReportCardFormValueChanged newReportCard  ReportCard        if  this indexOf newReportCard      -1             clear duplicate report card error message in  create report card  dialog       this clearCreateReportCardFormErrorMessage          else            set duplicate report card error message       this setCreateReportCardFromErrorMessage DUPLICATE REPORT CARD MESSAGE                onAddReportCardButtonClicked         this isCreatingNewReportCard   true      this createReportCardFormComponent configureForm new ReportCard    this isCreatingNewReportCard       this createReportCardFormComponent showFormDialog           onReportCardDeleteButtonClicked reportCard  ReportCard        this reportCardCommandExecute reportCard  ReportCardCommands Delete          onReportCardEditButtonClicked reportCard  ReportCard        this reportCardCommandExecute reportCard  ReportCardCommands EditReportCard          onAddVotesRouterLinkClicked reportCard  ReportCard        this reportCardCommandExecute reportCard  ReportCardCommands EditVotes          onReportCardDeleteConfirmButtonClick isDeleteOk  boolean        if  isDeleteOk          this providerData reportCards splice this providerData selectedReportCardIndex  1            store updated reportCards in local storage       this dataService storeProviderData this providerData             this displayReportCardDeleteConfirmation   false         reportCardCommandExecute reportCard  ReportCard  command  ReportCardCommands        this providerData selectedReportCardIndex   this indexOf reportCard       this selectedReportCard   reportCard       switch  command          case ReportCardCommands EditVotes          this dataService storeProviderData this providerData           break        case ReportCardCommands Delete          this displayReportCardDeleteConfirmation   true          break        case ReportCardCommands EditReportCard          this isCreatingNewReportCard   false          this createReportCardFormComponent configureForm reportCard  this isCreatingNewReportCard           this createReportCardFormComponent showFormDialog            break        default          break               private setCreateReportCardFromErrorMessage message  Message        this createReportCardError           this createReportCardError push message        this createReportCardFormComponent showError this createReportCardError          private clearCreateReportCardFormErrorMessage         this createReportCardError           this createReportCardFormComponent showError this createReportCardError           home component html   lt p-growl  value   growlMessages  sticky  sticky  gt  lt  p-growl gt   lt p-dataTable  value   providerData reportCards   paginator   true  rows  15   responsive   true  gt     lt header gt       lt div gt         lt h1 gt Report Cards    providerData reportCards length    lt  h1 gt       lt  div gt       lt button type  button  pButton icon  fa-plus   click   onAddReportCardButtonClicked    label  Add  title  Add new report card  gt  lt  button gt     lt  header gt     lt p-column styleClass  col-button  gt       lt template let-reportCard  rowData  gt         lt button type  button  pButton  click   onReportCardEditButtonClicked reportCard   icon  fa-pencil  title  Edit report card  gt  lt  button gt       lt  template gt     lt  p-column gt     lt p-column field  reportCardDataSource reportCardSourceName  header  Report Card   sortable   true  gt  lt  p-column gt     lt p-column field  reportCardYear  header  Year   sortable   true  gt  lt  p-column gt     lt p-column header  Votes   sortable   false  gt       lt template let-reportCard  rowData  gt          reportCard votes length          lt  -- lt button type  button  pButton icon  fa-pencil-square   click   editVotes reportCard   title  Edit votes  gt  lt  button gt -- gt         lt a  routerLink      votes     click   onAddVotesRouterLinkClicked reportCard   gt Edit lt  a gt       lt  template gt     lt  p-column gt     lt p-column styleClass  col-button  gt       lt template let-reportCard  rowData  gt         lt button type  button  pButton  click   onReportCardDeleteButtonClicked reportCard   icon  fa-trash  title  Delete report card  gt  lt  button gt       lt  template gt     lt  p-column gt   lt  p-dataTable gt    lt create-report-card-form  currentReportCardCount   providerData reportCards length   reportCardDataSourcesItems   reportCardDataSourcesItems     reportCardYearItems   reportCardYearItems   reportCardCreated  onReportCardCreated  event   editReportCardFormValueChanged  editReportCardFormValueChanged  event  gt   lt  create-report-card-form gt    lt p-dialog header  Confirm Deletion    visible    displayReportCardDeleteConfirmation  modal  modal  showEffect  fade  gt     lt p gt      Delete the following report card and all related data   lt strong gt NO undo lt  strong gt       lt  p gt     lt p gt       lt strong gt   providerData  reportCards providerData selectedReportCardIndex   reportCardDataSource  reportCardSourceName   lt  strong gt  lt br  gt       lt strong gt   providerData  reportCards providerData selectedReportCardIndex   reportCardYear   lt  strong gt     lt  p gt     lt footer gt       lt div class  ui-dialog-buttonpane ui-widget-content ui-helper-clearfix  gt         lt button type  button  pButton icon  fa-close   click   onReportCardDeleteConfirmButtonClick false   label  No  gt  lt  button gt         lt button type  button  pButton icon  fa-check   click   onReportCardDeleteConfirmButtonClick true   label  Yes  gt  lt  button gt       lt  div gt     lt  footer gt   lt  p-dialog gt

User · Accepted Answer

lt create-report-card-form  currentReportCardCount   providerData reportCards length                                                          In your HomeComponent template  you are trying to bind to an input on the CreateReportCardForm component that doesn t exist   In CreateReportCardForm  these are your only three inputs    Input   public reportCardDataSourcesItems  SelectItem     Input   public reportCardYearItems  SelectItem     Input   errorMessages  Message      Add one for currentReportCardCount and you should be good to go

User · Answer

I fixed it with adding the prefix  attr       lt create-report-card-form  attr currentReportCardCount   expression        Unfortunately this haven t documented properly yet   more detail here

User · Answer

If you use the Angular CLI to create your components  let s say CarComponent  it attaches app to the selector name  i e app-car  and this throws the above error when you reference the component in the parent view  Therefore you either have to change the selector name in the parent view to let s say  lt app-car gt  lt  app-car gt  or change the selector in the CarComponent to selector   car

User · Answer

There are multiple possible causes for this error    1  When you put the property  x  inside brackets you are trying to bind to it  Therefore first thing to check is if the property  x  is defined in your component with an Input   decorator  Your html file    lt body  x        gt    Your class file   export class YourComponentClass       Input     x  string             make sure you also have the parentheses   2  Make sure you registered your component directive pipe classes in NgModule    NgModule           declarations                 YourComponentClass                 See https   angular io guide ngmodule declare-directives for more details about declare directives   3  Also happens if you have a typo in your angular directive  For example    lt div  ngif       gt               Instead of    lt div  ngIf       gt    This happens because under the hood angular converts the asterisk syntax to    lt div  ngIf        gt

User · Answer

I ran into the same error  when I just forgot to declare my custom component in my NgModule - check there  if the others solutions won t work for you

[angular] Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'

Examples related to angular

Examples related to typescript