[angular] Iterate over object in Angular

Define the MapValuesPipe and implement PipeTransform:

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'mapValuesPipe'})
export class MapValuesPipe implements PipeTransform {
    transform(value: any, args?: any[]): Object[] {
        let mArray: 
        value.forEach((key, val) => {
            mArray.push({
                mKey: key,
                mValue: val
            });
        });

        return mArray;
    }
}

Add your pipe in your pipes module. This is important if you need to use the same pipe in more than one components:

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MapValuesPipe
  ],
  declarations: [..., MapValuesPipe, ...]
})
export class PipesAggrModule {}

Then simply use the pipe in your html with *ngFor:

<tr *ngFor="let attribute of mMap | mapValuesPipe">

Remember, you will need to declare your PipesModule in the component where you want to use the pipe:

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}