Can't bind to 'ngIf' since it isn't a known property of 'div' angular 17

I am using Angular version 17 cli

<div class="row" [class.dark-category-box]="themeService.isDark()" *ngIf="trendingCategories">

I get this error:

 Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the 
'CategoriesStyleThreeComponent' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 
'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component.

This is the app.module:

    import { HttpClientModule } from '@angular/common/http'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { NgxScrollTopModule } from 'ngx-scrolltop';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { CommonModule } from '@angular/common';  
import {CategoriesStyleThreeComponent} from './components/common/categories-style-three/categories-style-three.component'

 @NgModule({
 declarations: [],
 imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxScrollTopModule,
    HttpClientModule,
    CommonModule
 ],
 providers: [],
 bootstrap: [],
     exports: [CategoriesStyleThreeComponent]
 })
   export class AppModule { }

and my component code:

 import { Component, OnInit } from '@angular/core';
 import { ThemeCustomizerService } from '../theme-customizer/theme-customizer.service';
 import { RouterLink } from '@angular/router';
 import { CategoryService } from '../../../services/category.service';
 import { Category } from '../../../models/category.model';


@Component({
selector: 'app-categories-style-three',
standalone: true,
imports: [RouterLink],
templateUrl: './categories-style-three.component.html',
styleUrls: ['./categories-style-three.component.scss']
})
export class CategoriesStyleThreeComponent implements OnInit {
trendingCategories: Category[];
numCategories: number = 5;

isToggled = false;

constructor(public themeService: ThemeCustomizerService,
    private categoryService: CategoryService) {
    this.themeService.isToggled$.subscribe(isToggled => {
        this.isToggled = isToggled;
    });
}

toggleTheme() {
    this.themeService.toggleTheme();
}

ngOnInit(): void { 
    this.loadTrendingCategories();
}

loadTrendingCategories(): void {
    this.categoryService.getTrendingCategories()
        .subscribe(categories => {
            this.trendingCategories = categories;
            console.log(categories);
        });
  }

 }
 

>Solution :

If CategoriesStyleThreeComponent is standalone, then ensure you have added CommonModule to the imports array!

CommonModule contains the directives like ngClass and ngIf to use in the HTML, you can also import these individual items separately.

Standalone component require the imports to be added on the component, since they can function as a individual unit, without depending on modules!

...
@Component({
  ...
  standalone: true,
  imports: [
    ...
    CommonModule,
    ...
  ],
  ...
})
export class CategoriesStyleThreeComponent {
    ...