CODEWITHSUNDEEP
htmlangulartypescript
EliKnaffo
EliKnaffo

Reputation: 354

Using 2 Pages to filter a table in angular

I'm quite new to angular and wanted to know how to make it so i can have 1 page that you put the info you want to filter in the table and when you press "search" it will lead you to the second page where you see the table after its filtered.

i my question is odd but i really couldn't find any answer how to do this online.

I cant share code as its confidential to my work.

Something that looks like this site : https://maerskcontainersales.com/

I have tried using mock data but still couldn't put my head into the right thing to do.

Upvotes: 1

Views: 620

Answers (2)

yashpatelyk
yashpatelyk

Reputation: 429

There can be multiple ways how you can achieve this.

  1. Using Provider

Suppose you have two pages and , serach-page is where you will enter your filters and result-page is where the table renders.

In search-page, you will create inputs( ex: textbox, dropdown etc ) and have ngModels for all of them, or you can use Angular reactive forms i.e FormGroup and FormControls. Users will select their input and click on search button, which will read values from models or controls and store them in the provider.

search-page.component.html

<form [formGroup]="searchForm" (submit)="search()">
    <input formControlName="country" />
    <input formControlName="city" />
    ...
    <input type="submit">
</form>

search-page.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.searchService.setData({ country, city });
        this.router.navigate(['/result']); // '/result' is path on the result-page
    }
    ...
}

search.service.ts

@Injectable()
export class SearchService {
    _data : any;
    set data(val) {
        this._data = val;
    }
    get data() {
        return this._data;
    }
}

result-page.component.ts

export class ResultPage {
    ...
    ngOnInit() {
        const filters = this.searchService.getData();
        // filters will be your data from previous page
    }
    ...
}
  1. Using RouterParams

search-page.component.html

// same as before

search-page.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
    }
    ...
}

result-page.component.ts

export class ResultPage {
    ...
    constructor(route:ActivatedRoute) {
        this.country = route.snapshot.paramMap.get("country")

        // alternatively you can also do below
        route.paramMap.subscribe(filters => {
            // you will have your filters here
        });
    }
    ...
}

And once you have values of filters in result-page, use them to get data or filter data if already fetched, then render the table accordingly.

Let me know if I wasn't clear.

Upvotes: 2

Udi Mazor
Udi Mazor

Reputation: 1826

The simple solution I would suggest you to use a filter component and a results component a third container component. This component will get the filter criteria as an input variable and will output the filter criteria (using an output variable) when you press the "filter" button.

The container app will look like this:

<filterComponent (onFilter)="changeFilter($event)" [data]="someDate" *ngIf="!filterCriteria"></filterComponent>

<resultsComponent [data]="someDate" [filterCriteria]="filterCriteria" *ngIf="!!filterCriteria"></resultsComponent>

The filterCriteria that is sent to the second tableComponent will come from the eventEmmiter of the first tableComponent. The filterCriteria variable will be initiate to null and this will allow you to switch from one table to the other.

Upvotes: 1

Related Questions