I am new to Angular and I have been following the https://angular.io/start as a guide and I came across an error on the latter part of the passing data to a child component section. the last instructions given by the guide is
To display ProductAlertsComponent as a child of ProductListComponent, add the selector, to product-list.component.html. Pass the current product as input to the component using property binding.
I have done that and added this to my product-list-component.
<app-product-alert [product]="product"></app-product-alert>
but I encountered an error on my stackblitz windows saying that "app-alert-component is not a known element." I tried importing it on the app.module.ts like the answer here says Angular 2 'component' is not a known element but the stackblitz windows just returns to me a blank page.
this is my app.module.ts
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot([{ path: '', component: ProductListComponent }])
],
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertComponent
],
and this is my app-alert-component.ts
import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Product } from '../products';
@Component({
selector: 'app-product-alert',
templateUrl: './product-alert.component.html',
styleUrls: ['./product-alert.component.css']
})
export class ProductAlertComponent implements OnInit {
@Input() product!: Product;
constructor() {}
ngOnInit() {}
I'd very much appreciate it if you could point me in the right direction on where did I go wrong. or is this an error on the documentation and if so, is there a way to notify them. Thank you.
