Search code examples
angularangular2-directives

How to use nested ngFor in angular2

I would display some data 

 person = [
    {name: 'Jacob', color: 'Red', date: '2015-03-15', info: [
      'info1',
      'info2',
      'info3',
      'info4',
      'info5'
    ]},
    {name: 'Jack', color: 'Red', date: '2017-04-25'}, 
    {name: 'Jared', color: 'Red', date: '2016-11-15'},
];

I know how to display single data but i wonder how to dipslay exactly whole array of info. 

  <ul *ngFor="let pers of person">
        <li>
            {{pers.name}} {{pers.color}} {{pers.date}}
        </li>
  </ul>
Solution

  • I guess you need this,

      <ul *ngFor="let pers of person">
        <li>
            {{pers.name}} {{pers.color}} {{pers.date}}
             <ul *ngFor="let info of pers.info">
             <li>{{info}}</li>
             </ul>
        </li>
  </ul>

    DEMO