title: TypeError: Cannot read property 'toLowerCase' of null in angular5-data-table angular 2+
body: <p>I use <code>angular5-data-table</code> to display my participants. Recently, I started to have errors in searching or filtering the table. The error is :</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'toLowerCase' of null</p>
  </blockquote>
  
  <p>I don't know why I have <code>null</code>. It's very strange that I didn't have any problems like last week. </p>
  
  <p>My search or filter html code is :</p>
  
  <pre><code>&lt;input type="text" class="form-control input-md" placeholder="Search by first name" #query (keyup)="searchParticipant(query.value)" [(ngModel)]="filter.name"&gt;
  </code></pre>
  
  <p>And my component.ts code is :</p>
  
  <pre><code>searchParticipant(query: string) {
    const filteredParticipants = (query) ?
    this.participants.filter(p =&gt; p.firstName.toLowerCase().includes(query.toLowerCase())) :
    this.participants;
    this.initializeTable(filteredParticipants);
  }
  </code></pre>
  
  <p>I am able to list all participants, able to navigate pages and sorting. However, filtering is throwing that error above. I  refactored code and looked at their websites but no luck so far. Any help would be appreciated.</p>
  
  <p>EDIT: Here is the full component.ts file. Please note that instead of <code>Participant</code>, I use <code>Member</code> in here. But I have the same problem.</p>
  
  <pre><code>export class MembersListComponent implements OnInit {
    members: Member[];
    totalMembers: any;
  
    items: Member[] = [];
    itemCount: number;
    filter: any = {};
    tableResource: DataTableResource&lt;Member&gt;;
  
    allMembers: Member[];
  
    constructor(private memberService: MemberService, private alertifyService: AlertifyService, private route: ActivatedRoute) { }
  
    ngOnInit() {
      this.loadMembers();
    }
  
    private initializeTable(members: Member[]) {
      this.tableResource = new DataTableResource(members);
      this.tableResource.query({ offset: 0 }).then(items =&gt; this.items = items);
      this.tableResource.count().then(count =&gt; this.itemCount = count);
   }
  
    reloadItems(params: any) {
      if (!this.tableResource) { return; }
      this.tableResource.query(params).then(items =&gt; this.items = items);
    }
  
    loadMembers() {
      this.memberService.getAllMembers().subscribe((members: Member[]) =&gt; {
        this.members = members;
        this.initializeTable(members);
      }, error =&gt; {
        this.alertifyService.error(error);
      });
    }
  
    searchMember(query: string) {
      const filteredMembers = (query) ?
        this.members.filter(p =&gt; p.firstName.toLowerCase().includes(query.toLowerCase())) :
        this.members;
        this.initializeTable(filteredMembers);
    }
  }
  </code></pre>