EXP

var users = [{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
 }, ...........];
  
 your profile page:
 //ngforeach -> 
 <div> your area of name: {{user.name}}</div>
 <div>your area of geo are: {{user.address?.geo?.lat}}</div>
 
 instend you can (profile page):
 <username [name]="user.name" />
 <user-address [address]="user.address" />
 
 address comp:
 <geo-comp [geo]="address.geo">
 
 inside geo-comp:
<div>your area of geo are {{geo|json}}</div>
 AND SO ON......