Angular component is not showing up(or rendering) in the elements

I am new to the Angular JS , and I have been trying to make a ecommerce website in the Angular. My component

<app-products-list/>


is not showing up in the elements of the browser.

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './components/header/header.component';
import { ProductsListComponent } from "./pages/products-list/products-list.component";

@Component({
selector: 'app-root',
imports: [HeaderComponent, ProductsListComponent],
template: `
<app-header>

<app-products-list/>
`,
styles: [],
})
export class AppComponent {
title = 'angular-ecomm';
}


products-list.component.ts

import { Component, signal } from '@angular/core';
import { Product } from '../../models/products.model';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-products-list',
standalone: true,
imports: [CommonModule],
template: `
<div class="p-8 grid grid-cols-2 gap-4">
@for (product of products(); track product.id) {
{{product.title}}
}
</div>
`,
styles: ``
})
export class ProductsListComponent {
products = signal<Product[]>([
{
id: 1,
title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
price: 109.95,
image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
stock: 10,
},
{
id: 2,
title: 'Mens Casual Premium Slim Fit T-Shirts',
price: 22.3,
image: 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg',
stock: 100,
},
{
id: 3,
title: 'Mens Cotton Jacket',
price: 55.99,
image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg',
stock: 0,
},
{
id: 4,
title: 'Mens Casual Slim Fit',
price: 15.99,
image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg',
stock: 5,
},
{
id: 5,
title: "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
price: 695,
image: 'https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg',
stock: 1,
}
]);

constructor() {
console.log("✅ ProductsListComponent Loaded!");
}
}


products.model.ts

export interface Product{
id: number;
title: string;
image: string;
price: number;
stock?: number;
}


I first thought it is the issue with taliwind CSS, but then when I inspect I saw that

<app-products-list/>


is not showing up in the elements.



I tried ng-serve again and again but didnt work. I have also tried to use ngFor loop instead of For but it results in all the same. I have also get rid of the CSS but that is not working too. I have added a function at the end of products-list.component.ts and saw it is seen in the console but the <app-products-list/> is not rendering.

constructor() {
console.log("✅ ProductsListComponent Loaded!");
}

Continue reading...