Encountered an error: Cannot bind to 'config_private' as it is not a recognized property of 'blocks-banners-slideshow'.
This error indicates that the config_private property cannot be found, and there are three possible solutions:
- Add the missing property to the component
- In the component, change the property from
config_public to config_private
- In the HTML file, change the bound property from
config_private to config_public
First Solution - Add the missing property to the component
@Component({
selector: 'blocks-banners-slideshow', // Selector
templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', // Template
})
export class BannersBlocksSlideShow extends AbstractBlock{
list: Array<BannerItem>;
mySlideOptions: any;
// Input data
@Input() config: any;
@Input() config_public: any;
@Input() config_private: any; // <--- Add this
@Input() slideOptions = {};
....
}
Second Solution - 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 [config_public]="..." is not being used for binding, consider changing config_public to config_private in your component
@Component({
selector: 'blocks-banners-slideshow', // Selector
templateUrl: '/mobilesiteapp/template/?path=pages/banners/blocks/slideshow', // Template
})
export class BannersBlocksSlideShow extends AbstractBlock{
list: Array<BannerItem>;
mySlideOptions: any;
// Input data
@Input() config: any;
@Input() config_private: any; // <--- Change this
@Input() slideOptions = {};
........
}
Third Solution - In the HTML file, change the bound property from config_private to config_public
Try updating 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
Ensure that the component is declared in the app's 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 { }