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
- Add the missing property to the component
- In the component, change the property from
config_public
toconfig_private
- In the
.html
change the bound property fromconfig_private
toconfig_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.