n nSTEP 1 — สร้างโปรเจ็กต์ใหม่

ng new accounting-ng-nuttakit --no-standalone

STEP 2

npm install bootstrap
npm install @angular/material @angular/cdk

และเพิ่มใน angular.json


"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
]


STEP 3  สร้าง Module แรก
 ng generate module main --route main --module ../app-routing.module.ts 
 ng g module controls/login-control --routing

STEP 4

ng generate component modules/goods/goods-content
ng generate component modules/goods/goods-page
ng generate service modules/goods/goods-state

STEP 5

shared/interfaces/product.interface.ts


export interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  imgUrl: string;
}


goods-state.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Product } from 'src/app/shared/interfaces/product.interface';

@Injectable({ providedIn: 'root' })
export class GoodsStateService {
  private goodsState = new BehaviorSubject<Product[]>([]);
  goodsState$ = this.goodsState.asObservable();

  setState(data: Product[]) {
    this.goodsState.next(data);
  }

  getStateResult() {
    return this.goodsState$;
  }
}


STEP 10 — สร้าง Content Component (ตัวควบคุมหลัก)

import { Component, OnInit } from '@angular/core';
import { GoodsStateService } from './goods-state.service';
import { Product } from 'src/app/shared/interfaces/product.interface';

@Component({
  selector: 'app-goods-content',
  templateUrl: './goods-content.component.html',
})
export class GoodsContentComponent implements OnInit {
  products: Product[] = [];

  constructor(private goodsState: GoodsStateService) {}

  ngOnInit(): void {
    this.goodsState.getStateResult().subscribe(data => {
      this.products = data;
    });
    this.mockData(); // ตัวอย่าง data
  }

  private mockData() {
    const mock: Product[] = [
      { id: 1, name: 'Phone', price: 9000, category: 'Electronics', imgUrl: 'phone.jpg' },
      { id: 2, name: 'Laptop', price: 25000, category: 'Electronics', imgUrl: 'laptop.jpg' }
    ];
    this.goodsState.setState(mock);
  }
}

goods-page.component.html



<div class="row">
  <div *ngFor="let item of products" class="col-md-3">
    <div class="card mb-3">
      <img [src]="item.imgUrl" class="card-img-top">
      <div class="card-body">
        <h5>{{ item.name }}</h5>
        <p>{{ item.price | currency:'THB' }}</p>
      </div>
    </div>
  </div>
</div>



app-routing.module.ts



const routes: Routes = [
  {
    path: 'goods',
    canActivate: [AuthControl],
    loadChildren: () => import('./modules/goods/goods.module').then(m => m.GoodsModule)
  },
  { path: '**', redirectTo: '/goods' }
];



\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
MODULE
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


# สร้างโฟลเดอร์ control
mkdir src/app/controls/login-control
cd src/app/controls/login-control

# สร้าง module พร้อม routing
ng g module controls/login-control --routing

# (optional) guard
ng g guard controls/login-control/login