error TS2322: Type 'Observable<Categories[]>' is not assignable to type 'NgIterable<any> | null | undefined'

Here is the error I get when I try to get all the categories that are listed in my database (Firestore) from my page sidebar.component.html

 <div class="categories" *ngFor="let category of categories">

//error TS2322: Type 'Observable<Categories[]>' is not assignable to type 'NgIterable<any> | null | undefined'.

Here is my code sidebar.component.ts

import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import { Categories } from 'src/app/models/categories.model';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  categoriesCollection: AngularFirestoreCollection<Categories>;
  categories: Observable<Categories[]>;
  snapshot: any;

  constructor(private afs: AngularFirestore) { }

  ngOnInit(){
    this.categoriesCollection = this.afs.collection('categories');
    this.categories = this.categoriesCollection.valueChanges();
    this.snapshot = this.categoriesCollection.snapshotChanges()
        .pipe(
          map(actions => actions.map(a => a.payload.doc.data()))
        )
  }

}

The file categories.model.ts

export interface Categories {
  id: string;
  name: string;
  reference: string
}

Can you help me please. Thanks.

✅ For anyone looking for the answer, here it is :

<div class="categories" *ngFor="let category of categories | async">
//categories est un observable

Answer given by R. Richards