Front-end Developer Code

//our root app component import {Component, NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({   selector: 'my-app',   template: `   <div *ngFor='let test of tests' style='border: solid 1px'>     <div *ngFor="let a of test.A.B">       <div *ngFor="let b of a.C.D; let i = index"> <h4>Content {{i+1}}</h4>         <b>Content: </b>{{b.content}}<br>         <b>Date: </b>{{b.writedt | date}}<br>         <b>Id: </b>{{b.writerid}}         <hr>       </div>     </div>   </div>       `, }) export class App { public tests: any[] = [  {    'A': {      'B': [{        'C': {          'D'...

//our root app component import {Component, NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({   selector: 'my-app',   template: `   <div *ngFor='let test of tests' style='border: solid 1px'>     <div *ngFor="let a of test.A.B">       <div *ngFor="let b of a.C.D; let i = index"> <h4>Content {{i+1}}</h4>         <b>Content: </b>{{b.content}}<br>         <b>Date: </b>{{b.writedt | date}}<br>         <b>Id: </b>{{b.writerid}}         <hr>       </div>     </div>   </div>       `, }) export class App { public tests: any[] = [  {    'A': {      'B': [{        'C': {          'D'...

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">