0

I am trying to use a pipe filter so I can search by name through all of the departments but I cannot understand what I am doing wrong.

import  {Pipe, PipeTransform} from '@angular/core';
import { Department } from '../department';
@Pipe({
  name: 'depfilter'
})
export class DepFilterPipe implements PipeTransform {
  transform(departments:Department[],searchDep:string):Department[] {
    if(!departments|| !searchDep){
      return departments;
    }
    return departments.filter(department=>department.name.toLowerCare().indexOf(searchDep.toLowerCase())!==-1)
  }
}

This is my pipe file and then here is the department folder: enter image description here

Here is my code in departments.component.html and departments.component.ts

<div  class="container">
<h2> Departments </h2>
<p class="info"> To update any of the departments you should click on the name of the department.</p>
<p class="search">Search a name of Department:</p>
<input [(ngModel)]="searchDep" placeholder="Type a department you are looking for">

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col"> Department ID</th>
      <th scope="col">Department name</th>
      <th scope="col">Location</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let department of departments | depfilter : searchDep">
      <th scope="row">{{ department.id}}</th>
      <td><a class="link" routerLink="/Depdetail/{{department.id}}">{{ department.name }}</a></td>
      <td>{{ department.location }}</td>


      <td> <button class="delete" title="delete department"
      (click)="delete(department)">delete</button></td>
    </tr>
  </tbody>
</table>



  <a class="adddepartment" routerLink="/addDept"> New Department </a>

</div>

Here I have only the searchDep:string

import { Component, OnInit } from '@angular/core';
import { Departments } from '../departments';

import { Department } from '../department';
import { DepartmentService } from '../department.service';
@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  styleUrls: ['./departments.component.css']
})
export class DepartmentsComponent implements OnInit {

  departments: Department[];
  searchDep: string;

  constructor(private departmentService: DepartmentService) { }

  ngOnInit() {
    this.getDepartments();
  }

  getDepartments(): void {
    this.departmentService.getDepartments().
    subscribe(departments => this.departments = departments);
  }
  delete(department: Department): void {
    this.departments = this.departments.filter(d => d !== department);
    this.departmentService.deleteDepartment(department);
  }
}
6
  • @JB Nizet, Everything will be ok till you can keep your pipe pure. It's mean: do not mutate pipe's arguments
    – Buggy
    Sep 30, 2018 at 12:27
  • @Ангел Хаджиев, could you please describe what problem do you have? What exactly does not work?
    – Buggy
    Sep 30, 2018 at 12:29
  • Not sure how to keep it pure though. I managed to fix some problems and now I have this problem: ERROR in ./src/app/app.module.ts Module not found: Error: Can't resolve '/departments/dep-filter.pipe.ts' in 'C:\Users\Angel\Desktop\truth\Web_2_Angular\angular-project\src\app' i 「wdm」: Failed to compile. Sep 30, 2018 at 12:29
  • My problem is that it does not filter the departments by their name, it just shows a white blank page Sep 30, 2018 at 12:30

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.