CODEWITHSUNDEEP
angular
Michael Lim
Michael Lim

Reputation: 51

Angular: {{component-name}} is not a known element

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.

Upvotes: 3

Views: 10695

Answers (1)

Michael Lim
Michael Lim

Reputation: 51

I just found the answer.

adding the ProductAlertComponent on the declarations of the app.module.ts works but you have to do a refresh on the page.

Upvotes: 2

Related Questions