8. Error Cant bind to ngForOf since it isnt a known property

tech

Table of Content

• Introduction
• Frontend
• Import CommonModule
• Hasil

Introduction

*ngFor adalah salah satu direktif struktural yang disediakan oleh Angular untuk melakukan iterasi atas koleksi data dan menghasilkan elemen DOM berdasarkan data tersebut. Untuk menggunakan direktif ini (dan direktif Angular lainnya seperti *ngIf), Anda perlu mengimpor CommonModule ke dalam modul yang mendeklarasikan komponen Anda.

Frontend

<div class="container">
    <h1>Home Page</h1>
    <p>Here are the Homes...</p>
 
    <h2>SMS Drivers</h2>
    <div *ngFor="let driver of smsDrivers">
        {{ driver.nama }} 
    </div>
</div>

Import CommonModule

import { CommonModule } from '@angular/common';
 
@Component({
  selector: 'app-home',
  imports: [CommonModule],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})

Penjelasan:

• import commonModule
• jangan lupa load commonModule di @component

Hasil

Date: 24-03-2025