get array of maps key value pair in firestore in Angular

I have firestore structure like dB structure.How am I supposed to loop through all the key-value pair in each map and output in template using *ngFor and interpolation?

Or should I store all the maps inside an array and then access it? Like this guy did Get map data from Cloud Firestore ?

I’m new to firestore, help me out. This is code what I’m using to get "desc:xyz" in shortDesc document of home collection.
This is a service.

shortDesc:Observable<any>;
constructor(private http:HttpClient, private afs:AngularFirestore) {  }

getshortDescription(){
    this.shortDesc = this.afs.collection("home").doc("shortDesc").valueChanges();
    return this.shortDesc;
  }

home.component.ts

  shortDescription:Details;

  constructor(private serv:ServicesService) { }

  ngOnInit(): void {
    this.serv.getshortDescription().subscribe( data => {
      this.shortDescription = data;
    });
  }

details.model.ts

export interface Details{
    desc:string;
}

What should i do to get the key value pair of each map and output on component.html ?

Source: Angular Questions