Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I got a parent component with following template:

<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>

And then application try to show it tell me: Unhandled Promise rejection:

Template parse errors:

Can't bind to 'config_private' since it isn't a known property of 'blocks-banners-slideshow'.
1. If 'blocks-banners-slideshow' is an Angular component and it has 'config_private' input, then verify that it is part of this module.
2. If 'blocks-banners-slideshow' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

A child component text:

@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() slideOptions = {};

 ....
}

How to fix it?

like image 310
Alexander Zakusilo Avatar asked Oct 13 '16 15:10

Alexander Zakusilo


People also ask

What is the use of input form in angular?

Form contains multiple html input elements to take input from the user. button allows the user to submit the from to backend API an d it calls click binding event. In Angular, View is html template and controller is an typescript component. Reading input text is basic concept every Angular developer need to know.

How to read input element value on button click in angular?

For Angular versions,less than 8, viewChild is annotated with ElementRef type in component to read the input value. Finally, read the input value using ElementRef.nativeElement.value. Controller typescript component on reading input element value on button click.

How to fix'can't bind to ngmodel'error in angular?

To fix Can't bind to 'ngModel' since it isn't a known property of 'input' error in Angular applications we have to import FormModule in app.module.ts file. If you are using FormBuilder class to create reactive form we have to import ReactiveFormsModule as well to avoid below error. I am One among a million Software engineers of India.

What are the most important things to remember when using angular?

Important to remember in Angular most of the property binding is camelCase like ngModel, ngClass and so on 3. Wrong Input/Output declaration We know this is a very powerful communication medium but sometimes it can be troublesome.


2 Answers

For me, this error occured because I wrote

@Input

instead of

@Input()

before the property.

like image 31
Matthias Avatar answered Oct 09 '22 22:10

Matthias


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 { }
like image 185
Logan H Avatar answered Oct 09 '22 20:10

Logan H