Can't bind to 'property' since it isn't a known property of 'component'

4
votes

This is my code:

I have my app.module.ts

import { CustomAlertComponent } from './pages/common/custom- 
alert.component';
@NgModule({
  imports: [...],
  exports: [ ..., CustomAlertComponent],
  declarations: [.., CustomAlertComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

custom-alert.component.html

<ngb-alert *ngIf="!staticAlertClosed" [type]="type" (close)="true">{{message}}</ngb-alert>

custom-alert.component.ts

import { Component, OnInit, Input, EventEmitter } from '@angular/core';
 @Component({
  selector: 'custom-alert',
  templateUrl: './custom-alert.component.html'
})
export class CustomAlertComponent implements OnInit {

 @Input() message: string;
 @Input() type: string;
 @Input() staticAlertClosed:boolean;

 constructor() {}

 ngOnInit(){}
}

and start-workflow.component.ts

import { Component, OnInit, ViewEncapsulation, ViewContainerRef, Input, Output, EventEmitter  } from '@angular/core';
import { CustomAlertComponent } from '../common/custom-alert.component';
@Component({
  selector: 'start-workflow',
  templateUrl: 'start-workflow.component.html',
  styleUrls: ['../../../assets/scss/plugins/_datepicker.scss', 'start- 
  workflow.component.css']
})
export class StartWorkflowComponent implements OnInit{
  message: string;
  type: string;
  staticAlertClosed:boolean = false;

  constructor() {}
  public method(){
    this.message= 'Archivo enviado y guardado';
    this.type= 'success';
    this.staticAlertClosed = true;
 }
}

I'm having the following error:

Blockquote core.js:1440 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property 1. If 'custom-alert' is an Angular component and it has 'message' input, then verify that it is part of this module. 2. If 'custom-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][(message)]="text"> "): ng:///StartWorkflowModule/StartWorkflowComponent.html@1:16 'custom-alert' is not a known element:

Please help

2
angularbinding
DId you import the ngb-alert module ? – wentjun

2 Answers

2
votes

You have to import and add NgbModule to your app.module.ts file

import { CustomAlertComponent } from './pages/common/custom-alert.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [BrowserModule, NgbModule],
    exports: [ ..., CustomAlertComponent],
    declarations: [.., CustomAlertComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

This demo show your error without the import of NgbModule:

https://stackblitz.com/edit/angular-me769x-jms9xx?file=app%2Falert-custom.html

message:

Template parse errors:

  Can't bind to 'message' since it isn't a known property of 'ngb-alert'.
  1. If 'ngb-alert' is an Angular component and it has 'message' input, then verify that it is part of this module.
  2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<p>
   <ngb-alert type="custom" [ERROR ->][message]="text">{{message}}</ngb-alert>
</p>
   "): ng:///NgbdAlertCustomModule/NgbdAlertCustom.html@1:27
   'ngb-alert' is not a known element:
   1. If 'ngb-alert' is an Angular component, then verify that it is part of this module.
   2. If 'ngb-alert' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the     '@NgModule.schemas' of this component to suppress this message. ("<p>
   [ERROR ->]<ngb-alert type="custom" [message]="text">{{message}}</ngb-alert>
   </p>

Working example demo of what you are trying to achieve:

https://stackblitz.com/edit/angular-zdqpvr?file=app%2Falert-custom.html

0
votes

add schemas to your App Module 

@NgModule({
  declarations: [
CustomAlertComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule ],
  exports: [  ],
  providers: [  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

and for component, try to initialize it first on the constructor.

    message: string;
      type: string;
      staticAlertClosed:boolean = false;

      constructor() {
    this.message = [];
}