title: Angular How to filter array data by searching in input
body: <p>How to filter an array object in input text - angular
  I'm trying to make an search bar to filter where the user can search the location/description which I name it "sensor".</p>
  
  <h3>roomlist.component.ts</h3>
  
  <pre><code>  validateForm: FormGroup;
    rowData: templogRecord[] = [];
    option: any = [];
  
    onLoad() {
      this.rowData = record.default.records;
  
      this.option = [];
  
      this.rowData.forEach(room =&gt; {
        this.option.push({
          tooltip: {
            formatter: "{a} &lt;br/&gt;{b} : {c}°"
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: false },
              restore: { show: false },
              saveAsImage: { show: false }
            }
          },
          series: [
            {
              name: room.sensor,
              type: 'gauge',
              center: ['40%', '70%'],
              splitNumber: 10,
              radius: '70%',
              axisLine: {
                lineStyle: {
                  color: [[0.2, '#48b'], [0.8, '#228b22'], [1, '#ff0000']],
                  width: 8
                }
              },
              axisTick: {
                splitNumber: 10,
                length: 12,
                lineStyle: {
                  color: 'auto'
                }
              },
              axisLabel: {
                textStyle: {
                  color: 'auto'
                }
              },
              splitLine: {
                show: true,
                length: 30,
                lineStyle: {
                  color: 'auto'
                }
              },
              pointer: {
                width: 5
              },
              title: {
                show: true,
                offsetCenter: [0, '65%'],
                textStyle: {
                  fontWeight: 'bolder'
                }
              },
              detail: {
                formatter: '{value}°',
                textStyle: {
                  color: 'auto',
                  fontWeight: 'bolder'
                }
              },
              data: [{ value: this.tempGenerator(), name: "Temperature" }]
            },
            {
              name: '转速',
              type: 'gauge',
              center: ['70%', '25%'],
              splitNumber: 10,
              radius: '40%',
              axisLine: {
                lineStyle: {
                  width: 8
                }
              },
              axisTick: {
                length: 12,
                lineStyle: {
                  color: 'auto'
                }
              },
              splitLine: {
                length: 20,
                lineStyle: {
                  color: 'auto'
                }
              },
              pointer: {
                width: 5
              },
              title: {
                show: true,
                offsetCenter: [0, '80%'],
                textStyle: {
                  fontWeight: 'bolder',
                }
              },
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '55%'],
                textStyle: {
                  color: 'auto',
                  fontSize: 18,
                  fontWeight: 'bolder'
                }
              },
              data: [{ value: 1.5, name: "Humidity" }]
            }
          ]
        });
      });
    }
  
    tempGenerator() {
  
      var time = 12;
  
      var num = Math.random() * 100;
  
      var tempBase = Math.round(num);
  
      var fluc = [0, 1, 1, 2, 1, 1, 2.5, 3.5, 1, 1, 1, 1,
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
  
      return tempBase * fluc[time];
    }
  
    searchData(searchValue: any) {
      if (searchValue.length &gt;= 3) {
        this.rowData = this.rowData.filter((data: templogRecord) =&gt; {
          console.log(data['sensor']);
        });
      } else if (searchValue.length &lt; 1) {
        console.log('empty')
      }
   }
  }
  </code></pre>
  
  <h3>roomlist.json</h3>
  
  <pre><code>{
      "records": [
          {
              "dateandtime": "2018-06-14 02:24:02",
              "sensor": "Nine Seal Area",
              "temperature": "25.9",
              "humidity": "99.9"
          },
          {
              "dateandtime": "2018-06-14 02:24:02",
              "sensor": "Ten Line2",
              "temperature": "25.9",
              "humidity": "99.9"
          },
          {
              "dateandtime": "2018-06-14 02:22:01",
              "sensor": "Eight Line1",
              "temperature": "25.9",
              "humidity": "99.9"
          }
      ]
  }
  </code></pre>
  
  <p><strong>room-list.component.html</strong></p>
  
  <pre><code>&lt;div class="flex-container"&gt;
      &lt;div class="date-filter"&gt;
        &lt;nz-input-group [nzSuffix]="suffixIconSearch"&gt;
          &lt;input type="text" 
            nz-input placeholder="Search" 
            [(ngModel)]="filterSearch" 
            (ngModelChange)="searchData($event)"
            /&gt;
        &lt;/nz-input-group&gt;
        &lt;ng-template #suffixIconSearch&gt;
          &lt;i nz-icon nzType="search"&gt;&lt;/i&gt;
        &lt;/ng-template&gt;
      &lt;/div&gt;
      &lt;ul class="cards"&gt;
        &lt;li class="cards__item" *ngFor="let data of option"&gt;
          &lt;div class="card"&gt;
            &lt;div echarts [options]="data" [autoResize]="true"&gt;&lt;/div&gt;
            &lt;div class="card__content"&gt;
              &lt;button class="btn btn--block card__btn"&gt;Button&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>In the <code>searchData</code> function, I'm trying to make it filtering while typing based in location/description which I named it "sensor".</p>