title: Angular 4 pipe Cannot read property 'toLowerCase' of undefined
body: <p>I have implemented the following filter/pipe to capitalize first letter, imported in module.ts etc.</p>
  
  <p>pipe.ts</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  
  @Pipe({name: 'capitalize'})
  export class CapitalizePipe implements PipeTransform {
  
     transform(str:any) {
  
       var splitStr = str.toLowerCase().split(' ');
      for (var i = 0; i &lt; splitStr.length; i++) {
  
          splitStr[i] = splitStr[i].charAt(0).toUpperCase() + 
          splitStr[i].substring(1);     
      }
      // Directly return the joined string
      return splitStr.join(' '); 
     }
   }
  </code></pre>
  
  <p>Everything work fine, except when I use it in this expression, I get - <strong>Cannot read property 'toLowerCase' of undefined</strong> </p>
  
  <pre><code> {{messageItem?.cc &amp;&amp; messageItem?.cc[0]?.name | capitalize}}
  </code></pre>