I have 2 components Home component which is Home Page Product List component which will show me a list of products
Question : When I try to add product-list selector to home.component.html I get this error: Angular Component or directive matching' jhi-product-list' element is out of the current Angular module's scope
product-list.component.ts
import { Component, OnInit } from '@angular/core';
import {ProductService} from "../services/product.service";
import {Product} from "../entities/product";
@Component({
selector: 'jhi-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
products! : Product[];
constructor(private productService : ProductService) { }
ngOnInit(): void {
this.listProducts();
}
listProducts(){
this.productService.getProductList().subscribe(
data => {
this.products = data;
}
)
}
}
product-list.component.html
<p *ngFor="let tempProduct for products">
{{tempProduct.name}}: {{tempProduct.unitPrice | currency:'USD'}}
</p>
Home.component.html
<div class="row">
<jhi-product-list> </jhi-product-list>
</div>
And Thank you.
You need to add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component and declaration that component in module like this:
import { ProductListComponent } from './product-list/product-list.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [ProductListComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ProductListModule {}