Asked by:
Can't bind to 'alerts' since it isn't a known property of 'alertbox'. plz help!!

Question
-
User483994611 posted
I am getting unusual error:-
Unhandled Promise rejection: Template parse errors:
Can't bind to 'alerts' since it isn't a known property of 'alertbox'. ("
<div><alertbox [ERROR ->][alerts]="alerts" [messageBox]="messageBox"></alertbox></div>
"): CustomerInquiryComponent@43:14
Can't bind to 'messageBox' since it isn't a known property of 'alertbox'. ("
My CustomerInquiryComponent.ts looks like
import { Component, OnInit, EventEmitter, Output, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { DataGridColumn, DataGridButton, DataGridEventInformation } from '../shared/datagrid/datagrid.core';
import { DataGrid } from '../shared/datagrid/datagrid.component';
import { AlertService } from '../services/alert.service';
import { CustomerService } from '../services/customer.service';
import { AlertBoxComponent } from '../Shared/alertbox.component';
import { Customer } from '../entities/customer.entity';
import { TransactionalInformation } from '../entities/transactionalinformation.entity';
export var debugVersion = "?version=" + Date.now();
@Component({
templateUrl: 'app/Components/customer/customer-inquiry.component.html' + debugVersion,
providers: [AlertService]
})
export class CustomerInquiryComponent implements OnInit {
@ViewChild(DataGrid) datagrid: DataGrid;
public title: string = 'Customer Inquiry';
public customers: Customer[];
public columns = [];
public alerts: Array<string> = [];
public messageBox: string;
public totalRows: number;
public currentPageNumber: number = 1;
public totalPages: number;
public pageSize: number;
public companyName: string;
public customerCode: string;
private sortDirection: string;
private sortExpression: string;
public autoFilter: Boolean;
public delaySearch: Boolean;
public runningSearch: Boolean;
constructor(private alertService: AlertService, private customerService: CustomerService, private router: Router) {
this.currentPageNumber = 1;
this.autoFilter = false;
this.totalPages = 0;
this.totalRows = 0;
this.pageSize = 15;
this.sortDirection = "ASC";
this.sortExpression = "CompanyName";
}
public ngOnInit() {
this.columns.push(new DataGridColumn('customerCode', 'Customer Code', '[{"width": "20%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('companyName', 'Company Name', '[{"width": "30%" , "hyperLink": true, "disableSorting": false}]'));
this.columns.push(new DataGridColumn('city', 'City', '[{"width": "20%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('zipCode', 'Zip Code', '[{"width": "15%" , "disableSorting": false}]'));
this.columns.push(new DataGridColumn('dateUpdated', 'Date Updated', '[{"width": "15%" , "disableSorting": false, "formatDate": true}]'));
this.executeSearch();
}
private executeSearch(): void {
if (this.runningSearch == true) return;
let miliseconds = 500;
if (this.delaySearch == false) {
miliseconds = 0;
}
this.runningSearch = true;
setTimeout(() => {
let customer = new Customer();
customer.customerCode = this.customerCode;
customer.companyName = this.companyName;
customer.pageSize = this.pageSize;
customer.sortDirection = this.sortDirection;
customer.sortExpression = this.sortExpression;
customer.currentPageNumber = this.currentPageNumber;
this.customerService.getCustomers(customer)
.subscribe(
response => this.getCustomersOnSuccess(response),
response => this.getCustomersOnError(response));
}, miliseconds)
}
private getCustomersOnSuccess(response: Customer): void {
let transactionalInformation = new TransactionalInformation();
transactionalInformation.currentPageNumber = this.currentPageNumber;
transactionalInformation.pageSize = this.pageSize;
transactionalInformation.totalPages = response.totalPages;
transactionalInformation.totalRows = response.totalRows;
transactionalInformation.sortDirection = this.sortDirection;
transactionalInformation.sortExpression = this.sortExpression;
this.customers = response.customers;
this.datagrid.databind(transactionalInformation);
this.alertService.renderSuccessMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
this.runningSearch = false;
}
private getCustomersOnError(response): void {
this.alertService.renderErrorMessage(response.returnMessage);
this.messageBox = this.alertService.returnFormattedMessage();
this.alerts = this.alertService.returnAlerts();
this.runningSearch = false;
}
public datagridEvent(event) {
let datagridEvent: DataGridEventInformation = event.value;
if (datagridEvent.EventType == "PagingEvent") {
this.pagingCustomers(datagridEvent.CurrentPageNumber);
}
else if (datagridEvent.EventType == "PageSizeChanged") {
this.pageSizeChanged(datagridEvent.PageSize);
}
else if (datagridEvent.EventType == "ItemSelected") {
this.selectedCustomer(datagridEvent.ItemSelected);
}
else if (datagridEvent.EventType == "Sorting") {
this.sortCustomers(datagridEvent.SortDirection, datagridEvent.SortExpression);
}
}
private selectedCustomer(itemSelected: number) {
let rowSelected = itemSelected;
let row = this.customers[rowSelected];
let customerID = row.customerID;
this.router.navigate(['/customer/customermaintenance', { id: customerID }]);
}
private sortCustomers(sortDirection: string, sortExpression: string) {
this.sortDirection = sortDirection;
this.sortExpression = sortExpression;
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
private pagingCustomers(currentPageNumber: number) {
this.currentPageNumber = currentPageNumber;
this.delaySearch = false;
this.executeSearch();
}
private pageSizeChanged(pageSize: number) {
this.pageSize = pageSize;
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
public reset(): void {
this.customerCode = "";
this.companyName = "";
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
public search(): void {
this.currentPageNumber = 1;
this.delaySearch = false;
this.executeSearch();
}
public companyNameChanged(newValue): void {
if (this.autoFilter == false) return;
if (newValue == "") return;
this.companyName = newValue;
this.currentPageNumber = 1;
this.delaySearch = true;
setTimeout(() => {
this.executeSearch();
}, 500)
}
public customerCodeChanged(newValue): void {
if (this.autoFilter == false) return;
if (newValue == "") return;
this.customerCode = newValue;
this.currentPageNumber = 1;
this.delaySearch = true;
setTimeout(() => {
this.executeSearch();
}, 500)
}
My app.module.ts looks like:-
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { HttpModule } from '@angular/http';
import { routing } from './app.routing';
import { UserComponent } from './components/user.component';
import { HomeComponent } from './components/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CustomerInquiryComponent } from './Components/Customer/customer-inquiry.component';
import { RegistrationComponent } from './components/Registration/Registration.component';
import { UserService } from './Service/user.service';
import { AlertService } from './Components/Services/alert.service';
import { DataGrid } from './Components/Shared/DataGrid/datagrid.component';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],
declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, CustomerInquiryComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, AlertService],
bootstrap: [AppComponent]
})
export class AppModule { }
}
Wednesday, November 22, 2017 7:02 PM
All replies
-
User-1838255255 posted
Hi suvo,
According to your description and error message, i found here are someone who meet the similar issue as you, please check:
zone.js:569 Unhandled Promise rejection: Template parse errors:
ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'monthviewEventDetailTemplate' since it isn't a known property of 'calendar'.
https://github.com/twinssbc/Ionic2-Calendar/issues/184
Best Regards,
Eric Du
Thursday, November 23, 2017 6:07 AM -
User483994611 posted
In customer-inquiry.component.html <!--<alertbox [alerts]="alerts" [messageBox]="messageBox"></alertbox>-->
if i comment this,
Can't bind to 'alerts' since it isn't a known property of 'alertbox'.
this error goes away because i removed alert reference
Now the page opens but DI error comes I have removed all alert references but still DI error exists
I feel there is some prob with dependency injection
I think all dependencies are declared accordingly
Cant understand..plz help
Friday, November 24, 2017 4:48 AM -
User-80694925 posted
make sure your dependency and alert is imported only in your ng module. no other declerations or providers required.
Sunday, November 26, 2017 2:23 PM -
User-80694925 posted
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],
declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, CustomerInquiryComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, AlertService],
bootstrap: [AppComponent]
})
alertbox declaration is missing
Sunday, November 26, 2017 2:24 PM -
User483994611 posted
I added AlertBoxComponent but it did not work out...
The error is
Can't bind to 'type' since it isn't a known property of 'alert'. ("
<div style="padding-top:20px">
<alert *ngFor="let alert of alerts; let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">
<div [innerHTML]="messageBox"): AlertBoxComponent@2:55
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.
2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<div style="padding-top:20px">
[ERROR ->]<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type" dismissible="true" (close)="cl"): AlertBoxComponent@2:4 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors:
Can't bind to 'type' since it isn't a known property of 'alert'. ("
<div style="padding-top:20px">
<alert *ngFor="let alert of alerts; let i = index" [ERROR ->][type]="alert.type" dismissible="true" (close)="closeAlert(i)">
<div [innerHTML]="messageBox"): AlertBoxComponent@2:55
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.
2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
<div style="padding-top:20px">
[ERROR ->]<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type" dismissible="true" (close)="cl"): AlertBoxComponent@2:4
at SyntaxError.ZoneAwareError (http://localhost:54199/node_modules/zone.js/dist/zone.js:992:33)
at SyntaxError.BaseError [as constructor] (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:1592:20)
at new SyntaxError (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20)
at TemplateParser.parse (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:11435:23)
at JitCompiler._compileTemplate (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27548:72)
at eval (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27431:66)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27431:23)
at createResult (http://localhost:54199/node_modules/@angular/compiler/bundles/compiler.umd.js:27313:23)
at ZoneDelegate.invoke (http://localhost:54199/node_modules/zone.js/dist/zone.js:334:26)
at Zone.run (http://localhost:54199/node_modules/zone.js/dist/zone.js:126:43)
at http://localhost:54199/node_modules/zone.js/dist/zone.js:713:57
at ZoneDelegate.invokeTask (http://localhost:54199/node_modules/zone.js/dist/zone.js:367:31)
at Zone.runTask (http://localhost:54199/node_modules/zone.js/dist/zone.js:166:47)
at drainMicroTaskQueue (http://localhost:54199/node_modules/zone.js/dist/zone.js:546:35)
My app.module.ts looks like :-
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, routing, Ng2Bs3ModalModule],
declarations: [AppComponent, UserComponent, HomeComponent, FetchDataComponent, RegistrationComponent, DataGrid, CustomerInquiryComponent, AlertBoxComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }, UserService, CustomerService, AlertService],
bootstrap: [AppComponent]
})
Monday, November 27, 2017 5:15 AM -
User483994611 posted
Can some body assist..waiting eagerly..?
Thursday, December 14, 2017 11:21 AM