I have two components: Home component and product-list component.

This is my home.component.ts:

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { Products } from '../products';
import { ProductListComponent } from '../product-list/product-list.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, FormsModule, ProductListComponent],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css'
})
export class HomeComponent {
      // products: Products[] = []
      products: Products[]=[
        {
          "productId": 1,
          "productName": "Leaf Rake",
          "productCode": "GDN-0011",
          "releaseDate": "March 19, 2016",
          "price": 19.95,
          "description": "Leaf Rake with 48-inch wooden handle",
          "starRating": 3.2,
          imageUrl: "./assets/images/Leaf-Rake.png"
        },
        {
          "productId": 2,
          "productName": "Garden Cart",
          "productCode": "GDN-0023",
          "releaseDate": "March 18, 2016",
          "price": 32.99,
          "description": "15 gallon capacity rolling garden cart",
          "starRating": 4.2,
          imageUrl: "./assets/images/garden-cart.png"
        },
        { 
          "productId": 5, 
          "productName": "Hammer", 
          "productCode": "TBX-0048", 
          "releaseDate": "May 21, 2016", 
          "description": "Curved claw steel hammer", 
          "price": 8.9, 
          "starRating": 4.8, 
          "imageUrl": "./assets/images/rejon-Hammer.png" 
        }, 
        { 
          "productId": 8, 
          "productName": "Saw", 
          "productCode": "TBX-0022", 
          "releaseDate": "May 15, 2016", 
          "description": "15-inch steel blade hand saw", 
          "price": 11.55, 
          "starRating": 3.7, 
          "imageUrl": "./assets/images/egore911-saw.png" 
        }, 
        { 
          "productId": 10, 
          "productName": "Video Game Controller", 
          "productCode": "GMG-0042", 
          "releaseDate": "October 15, 2015", 
          "description": "Standard two-button video game controller", 
          "price": 35.95, 
          "starRating": 4.6, 
          "imageUrl": "./assets/images/xbox-controller.png" 
        }
      ]
  searching: string = '';//khởi tạo searching kiểu string có giá trị null
  filterProductList: Products[] = []// khởi tạo biến filterProductList

  ngOnInit(): void{
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this.filterProductList = this.products;
  }
  constructor(){
    this.filterProductList = this.products;   
  }
  filterResults(){
    console.log(this.searching);
    if(!this.searching){
      this.filterProductList = this.products;
    }
      //lọc this.products dựa trên tên sản phẩm
      this.filterProductList = this.products.filter(
      list => list?.productName.toLowerCase().includes(this.searching.toLowerCase())
    )
  }
}

This is my product-list.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Products } from '../products';
import { HomeComponent } from '../home/home.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, FormsModule, ProductListComponent],
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css'
})

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [HomeComponent, CommonModule],
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css'
})
export class ProductListComponent {
  @Input() productlist: Products[] = [];
}

I’m trying display in home.component.html but there was an error said:

“‘app-product-list’ is not a known element:

1. If ‘app-product-list’ is an Angular component, then verify that it is included in the ‘@Component.imports’ of this component.
2. If ‘app-product-list’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@Component.schemas’ of this component to suppress this message.ngtsc(-998001)”

This is my home.component.html codes:

<div class="row-mt-3">
    <div class="col-md-6">
        <form class="form-inline">
            <div class="form-group">
                <!-- <label for="searching">Tìm sản phẩm</label> -->
                <input type="text" size="50" [(ngModel)]="searching" 
            (ngModelChange)="filterResults()" name="searching"
            class="input form-control" placeholder="Tìm sản phẩm"/>
            </div>
        </form>
    </div>
</div>
<div class="row mt-3 pl-3 pr-3">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Image</th>
                <th>Product Name</th>
                <th>Code</th>
                <th>Available</th>
                <th>Price</th>
                <th>5 star Rating</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of filterProductList">
                <td scope="row"><img src="{{item.imageUrl}}" width="50px" alt=""></td>
                <td>{{item.productName}}</td>
                <td>{{item.productCode}}</td>
                <td>{{item.releaseDate}}</td>
                <td>{{item.price}}</td>
                <td>{{item.starRating}}</td>
            </tr>
        </tbody>
    </table>
</div>
<app-product-list></app-product-list>

Finally, I would like to say thank you to the person who viewed this post. If there is anything wrong with my English, code, or posting. Tell me, thank you so much.