How to iterate using ngFor loop Map containing key as string and values as map iteration

I am new to angular 5 and trying to iterate the map containing another map in typescript.
How to iterate below this kind of map in angular
below is code for component:

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map = new Map>();
  map1 = new Map();

  constructor() { 

  }

  ngOnInit() {
    this.map1.set("sss","sss");
    this.map1.set("aaa","sss");
    this.map1.set("sass","sss");
    this.map1.set("xxx","sss");
    this.map1.set("ss","sss");

    this.map1.forEach((value: string, key: string) => {
      console.log(key, value);

    });

    this.map.set("yoyoy",this.map1);

  }

}

and its template html is :

  
    {{recipient}}
   

{{map.size}}

For Angular 6.1+ , you can use default pipe keyvalue ( Do review and upvote also ) :

    
        {{recipient.key}} --> {{recipient.value}}
    

WORKING DEMO

For the previous version :

One simple solution to this is convert map to array : Array.from

Component Side :

map = new Map();

constructor(){
    this.map.set("sss","sss");
    this.map.set("aaa","sss");
    this.map.set("sass","sss");
    this.map.set("xxx","sss");
    this.map.set("ss","sss");
    this.map.forEach((value: string, key: string) => {
        console.log(key, value);
    });
}

getKeys(map){
    return Array.from(map.keys());
}

Template Side :

  
    {{recipient}}
   

WORKING DEMO

Stack Overflow Q#48187362, score: 485