I have encountered an issue while following an outdated tutorial by John Papa and Buddy Ward. Despite reading various Stack Overflow posts, I still can't resolve the problem. The solution suggested avoiding the use of directives: in my component and instead utilizing the declarations: property in the main module. Unfortunately, this did not work for me. Below is the error message from the console along with the relevant code snippet. Any assistance would be greatly appreciated. Thank you!
customer.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-customer',
templateUrl: 'app/customer/customer.component.html'
})
export class CustomerComponent implements OnInit {
@Input() customer: {id: number, name: string};
constructor() { }
ngOnInit() { }
}
customer.component.html
<span [style.color]="deansColor">{{customer.id}}</span>
<span>{{customer.name}}</span>
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CustomerComponent } from "./customer/customer.component";
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, CustomerComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { CustomerComponent } from './customer/customer.component';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
title = "Welcome to Dean's World of Angular...";
heading = 'Enjoy your stay!'
deansColor = 'red';
customers = [
{id: 1, name: "Dean"},
{id: 2, name: "Daryl"},
{id: 3, name: "Lee"},
{id: 4, name: "Josh"},
{id: 5, name: "Gerald"},
];
changeHeadingColor() {
this.deansColor = this.deansColor === 'blue' ? 'red' : 'blue';
}
}
app.component.html
<h1>{{title}}</h1>
<!--property binding-->
<div [style.color]="deansColor">
{{heading}}
</div>
<!--event binding-->
<button (click)="changeHeadingColor()">
Change Heading Color
</button>
<!--two way data-binding (approach #1)-->
<input type="text" [value]="heading" (keyup.enter)="heading = $event.target.value">
<!--two way data-binding (approach #1)-->
<input type="text" [(ngModel)]="heading">
<br/>
<ul>
<li *ngFor="let c of customers">
<my-customer [customer]="c"></my-customer>
</li>
</ul>
Error
Unhandled Promise rejection: Template parse errors:
Can't bind to 'customer' since it isn't a known property of 'my-customer'.