Group Filter

You might notice from the above code that we didn’t use a template-driven form which is provided by Angular. In this tutorial, we used reactive forms. Now it’s time to add a code block for the search component in the TS file.

The last part for this component is implementing the search function:

search(filters: any): void {
    Object.keys(filters).forEach(key => filters[key] === '' ? delete filters[key] : key);
    this.groupFilters.emit(filters);
}

4. Building a User-List Component

To begin, enter the following command:

ng generate component user-list

We will do it in the same way as we did for the search component, but, before that, we need data which will be fetched and displayed on the page. We are going to use JSON data that will add in the separate file and fetch it via a user service that will create with the following command.

ng generate service user

Here is where Angular observables com ein to solve our problem.

export class UserService {
    setGroupFilter$ = new Subject<any>();
    getGroupFilter = this.setGroupFilter$.asObservable();
    constructor() {}
    fetchUsers(): Observable<any> {
        return of(USERS);
    }
}

After making changes inside user service we can start working on the User-list component (UserListComponent).

export class UserListComponent implements OnChanges {
    @Input() groupFilters: Object;
    @Input() searchByKeyword: string;
    users: any[] = [];
    filteredUsers: any[] = [];
    constructor(private userService: UserService,
    private ref: ChangeDetectorRef) { }
    ngOnInit(): void {
        this.loadUsers();
    }
    ngOnChanges(): void {
        if (this.groupFilters) this.filterUserList(this.groupFilters, this.users);
    }
    filterUserList(filters: any, users: any): void {
        this.filteredUsers = this.users;
        const keys = Object.keys(filters);
        const filterUser = user => {
            let result = keys.map(key => {
                if (!~key.indexOf('age')) {
                    if(user[key]) {
                        return String(user[key]).toLowerCase().startsWith(String(filters[key]).toLowerCase())
                    } else {
                        return false;
                    }
                }
            });
            result = result.filter(it => it !== undefined);
            if (filters['ageto'] && filters['agefrom']) {
                if (user['age']) {
                    if (+user['age'] >= +filters['agefrom'] && +user['age'] <= +filters['ageto']) {
                        result.push(true);
                    } else {
                        result.push(false);
                    }
                    } else {
                        result.push(false);
                    }
                }
            return result.reduce((acc, cur: any) => { return acc & cur }, 1)
        }
        this.filteredUsers = this.users.filter(filterUser);
        }
        loadUsers(): void {
            this.userService.fetchUsers()
            .subscribe(users => this.users = users);
            this.filteredUsers = this.filteredUsers.length > 0 ? this.filteredUsers : this.users;
        }
    }

In the above code, we include event emitters in the search component and also get the data from the user service. Then we implement a user data filtering feature based on options like the age range or gender and by other filters as well. The most important thing is that you can type in both uppercase and lowercase and it will work in both cases. Sometimes you might notice issues connected with character type in the other examples.

So we need to create a simple HTML table for displaying the data.

<table class="table table-responsive">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Gender</th>
        <th>Job Title</th>
        <th>Age</th>
    </tr>
    <tbody>
        <tr *ngFor="let user of filteredUsers | filter: searchByKeyword: 'name'">
            <td>{{ user.firstName}}</td>
            <td>{{ user.lastName}}</td>
            <td>{{ user.gender}}</td>
            <td>{{ user.jobTitle}}</td>
            <td>{{ user.age}}</td>
        </tr>
    </tbody>
</table>

We have done a lot of work so far. Don’t worry, there’s just a few steps left.

5. Creating a User Component

To start, use the below command:

ng generate component user

You might think, ‘what’s the point of adding user components if there is already a user-list component included?’

User components will be a container for our search and user-list components.

<div class="container">
<br/>
<h1>List of Users</h1>
<hr/>
<app-search (groupFilters)="filters = $event"></app-search>
<br/>
<app-user-list [groupFilters]="filters"
[searchByKeyword]="searchText"></app-user-list>
</div>

Also, don’t forget about user-routing.module.ts and user.module.ts

While it’s a general Angular topic, you can choose your desired way to make the above components work together. However, for this tutorial, this approach was used:

import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';
const routes: Routes = [
  { path: '', component: UserComponent }
];

export const UserRoutes = RouterModule.forChild(routes);

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserComponent } from './user.component';
import { SearchComponent } from '../search/search.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserService } from '../../services/user.service';
import { FilterPipe } from '../../pipe/filter.pipe';
import { UserRoutes } from './user-routing.module';
@NgModule({
  imports:      [ CommonModule, FormsModule, ReactiveFormsModule, UserRoutes ],
  declarations: [ UserComponent, SearchComponent, UserListComponent, FilterPipe ],
  providers: [ UserService ]
})
export class UserModule { }

You can keep this two files inside the user folder.

Thanks for reading