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

Question

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!");
  }

Answer 1

You have to mark the App component as standalone inside the @Component decorator. Otherwise you cannot use the imports property:

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',
  standalone: true,
  imports: [HeaderComponent, ProductsListComponent],
  template: `
   <app-header>

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