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.