Angular 2. @Input since it isn't a known property of Angular 2. @Input since it isn't a known property of typescript typescript

Angular 2. @Input since it isn't a known property of


Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.

Means it can't find config_private so there are 3 ways to go about fixing this

  1. Add the missing property to the component
  2. In the component, change the property from config_public to config_private
  3. In the .html change the bound property from config_private to config_public

First Option - Add the missing property to the component

@Component({  selector: 'blocks-banners-slideshow', //Селектор  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон})export class BannersBlocksSlideShow extends AbstractBlock{  list: Array<BannerItem>;  mySlideOptions: any;  //Входящие данные  @Input() config: any;  @Input() config_public: any;  @Input() config_private: any; // <--- Add this  @Input() slideOptions = {}; ....}


Second option - In the component, change the property from config_public to config_private

<ion-content>  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_private]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_private]="{ url: 'url'}"></blocks-catalog-category>  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_private]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts></ion-content>

Since I don't see a [config_public]="..." property being bound try changing config_public to config_private in your component

@Component({  selector: 'blocks-banners-slideshow', //Селектор  templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', //Шаблон})export class BannersBlocksSlideShow extends AbstractBlock{  list: Array<BannerItem>;  mySlideOptions: any;  //Входящие данные  @Input() config: any;  @Input() config_private: any; // <--- Change this  @Input() slideOptions = {}; ........}


Third Option - In the .html change the bound property from config_private to config_public

Try changing the bound property to config_public

<ion-content>  <blocks-banners-slideshow class="contentBlock" [config]="{ zone: 'mobile'}" [config_public]="{ url: 'url'}" [slideOptions]="{ loop: true, pager: true}"></blocks-banners-slideshow>  <blocks-catalog-category class="contentBlock" [config]="{ parent_id: 0 }" [config_public]="{ url: 'url'}"></blocks-catalog-category>  <blocks-catalog-topproducts class="contentBlock" [config]="{ filter: { dir: 204}, page: 1, pageSize: 8}" [config_public]="{ url: 'url', showMoreProducts: false, columns: { tablet: 4, phone: 2}}"></blocks-catalog-topproducts></ion-content>

Update

Make sure component is declared in the apps module

app.module.ts

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';import { BannersBlocksSlideShow } from './banners-blocks-slideShow/banners-blocks-slideShow.component';@NgModule({    imports: [        BrowserModule    ],    declarations: [        AppComponent,        BannersBlocksSlideShow    ],    providers: [],    bootstrap: [AppComponent],})export class AppModule { }


For me, this error occured because I wrote

@Input

instead of

@Input()

before the property.


If you are using Ionic 2 with lazy loading then you may be forgot to include the declaration of your block in page module. In this case the error will be the same.