title: Interpolation pipe not working for uppercase angular
body: <p>Okay, </p>
  
  <p>I have three values, ParentTitle and childTitle, SiblingTitle. All coming from the Header[] array.</p>
  
  <pre><code> &lt;li *ngFor="let header of headers"&gt;
        &lt;div&gt;
          &lt;a&gt; &lt;i class="header-icons" [ngClass]="[header.titleIcon]"&gt;&lt;/i&gt;
            &lt;span class="menu-parentTitle"&gt;{{header.parentTitle | uppercase}}&lt;
  
  
   headers: Header[] = [
  // tslint:disable-next-line:max-line-length
  {
    parentTitle: ['Settings'], childTitle: ['General Setup', 'PMS Setup', 'Crewing Setup', 'Purchase Setup', 'Safety Setup',
      // tslint:disable-next-line:max-line-length
      'RA Setup', 'RH Setup', 'Voyage Setup'], siblingTitle: ['Vessel', 'Port', 'Owner', 'Engine Type', 'Vessel Type'],
    titleIcon: 'ft-settings', url: 'home/general-setup'
  },
  { parentTitle: ['Data Sync'], childTitle: [], siblingTitle: [], titleIcon: 'ft-zap', url: '' },
  { parentTitle: ['PMS'], childTitle: [], siblingTitle: [], titleIcon: 'ft-layers', url: '' },
  { parentTitle: ['Crewing'], childTitle: [], siblingTitle: [], titleIcon: 'ft-users', url: '' },
  { parentTitle: ['Purchase'], childTitle: [], siblingTitle: [], titleIcon: 'ft-shopping-cart', url: '' },
  { parentTitle: ['Safety'], childTitle: [], siblingTitle: [], titleIcon: 'ft-plus-square', url: '' },
  { parentTitle: ['Document'], childTitle: [], siblingTitle: [], titleIcon: 'ft-folder', url: '' },
  { parentTitle: ['Forms'], childTitle: [], siblingTitle: [], titleIcon: 'ft-paperclip', url: '' },
  { parentTitle: ['Risk Analysis'], childTitle: [], siblingTitle: [], titleIcon: 'ft-shield', url: '' },
  { parentTitle: ['Rest Hours'], childTitle: [], siblingTitle: [], titleIcon: 'ft-clock', url: '' },
  { parentTitle: ['Voyage'], childTitle: [], siblingTitle: [], titleIcon: 'ft-compass', url: '' },
  { parentTitle: ['Environment'], childTitle: [], siblingTitle: [], titleIcon: 'ft-droplet', url: '' }
  </code></pre>
  
  <p>];</p>
  
  <p>All of them coming from server rest api, and stored as arrary[] strings. So inside the div tag i use *ngFor loop to show all of the title. That's works fine.</p>
  
  <p>So {{ childTitle | uppercase }} works fine. But {{ parentTitle.title | uppercase }} ---> not working or not showing the text at all.</p>
  
  <p>What could be the issue!.</p>