title: Unable to set object notation based on parent child using angular 2
body: <p>here i am newbie to angular and javascript here what i am trying to achieve is i have  a couple of data</p>
  
  <pre><code> data = ['middlename.firstname.lastname','firstname.lastname']; 
  </code></pre>
  
  <p>and now i am looping in the .html  using the below approach</p>
  
  <pre><code>&lt;div *ngFor="let x of data"&gt;
  
     &lt;p *ngIf="x.indexOf('.')!==1"&gt;
         {{x.split('.')[1]}}
     &lt;/p&gt;
  
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here my issue 
    in the <strong>data</strong> if u see there is  "'middlename.firstname.lastname" where <strong>middle name</strong>  is parent and remaining all are children so based on that in the front end i am displaying the postion 1 which is after the parent  upto this is working. But if u see  2nd data there is "firstname.lastname" here the parent is not there so it is displaying according to the position "Lastname" here i want to  display the <strong>firstname</strong> even though it has no parent.</p>
  
  <p>below is my stackblitz url</p>
  
  <p><a href="https://stackblitz.com/edit/angular-jmdaxg" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-jmdaxg</a></p>
  
  <pre><code>Present output :
            firstname
            lastname
  expected output :
            firstname
            lastname
  </code></pre>