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

Liliana del Carmen Castellanos

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

HDJEMAI

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

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

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

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

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

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

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

Can't bind to 'routerLink' since it isn't a known property

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

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

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

Angular 4 Can't bind to <property> since it isn't a known property of <component>

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

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

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

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

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

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

Error: Can't bind to 'ngModel' since it isn't a known property of

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

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

Angular 7 Can't bind to <property> since it isn't a known property of <component> (from imported module)

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

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

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

Can't bind to 'value' since it isn't a known native property

Angular Can't bind to 'dirUnless' since it isn't a known property

Can't bind to 'ngModel' since it isn't a known property of 'input'?

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

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