How to use the right-angled.filter function in right-angled

import { Component, OnInit } from '@angular/core';
import { filter } from 'right-angled';

import { AirportsService } from '../data/airports.service';

@Component({
    selector: 'rt-demo-additional-filter',
    styleUrls: ['../filter-area/filter-area.component.scss'],
    templateUrl: 'additional-filter.component.html'
})
export class AdditionalFilterComponent implements OnInit {
    @filter('regionName') public selectedRegion: string = null;
    @filter('countryName') public selectedCountry: string = null;
    @filter('cityName') public selectedCity: string = null;
    public countries: any;
    public cities: any;
    public regions: any;
    constructor(private airportsService: AirportsService) {
    }
    public ngOnInit(): void {
        this.regions = this.airportsService.getRegionLookups();
        this.countries = this.airportsService.getCountryLookups(this.selectedRegion);
        this.cities = this.airportsService.getCityLookups(this.selectedCountry);
    }
    public onRegionChanged(newValue: string): void {
        this.selectedRegion = newValue;
        this.countries = this.airportsService.getCountryLookups(this.selectedRegion);
    }
    public onCountryChanged(newValue: string): void {

import { Component, OnInit } from '@angular/core';
import { filter } from 'right-angled';

import { AirportsService } from '../data/airports.service';

@Component({
    selector: 'rt-demo-additional-filter',
    styleUrls: ['../filter-area/filter-area.component.scss'],
    templateUrl: 'additional-filter.component.html'
})
export class AdditionalFilterComponent implements OnInit {
    @filter('regionName') public selectedRegion: string = null;
    @filter('countryName') public selectedCountry: string = null;
    @filter('cityName') public selectedCity: string = null;
    public countries: any;
    public cities: any;
    public regions: any;
    constructor(private airportsService: AirportsService) {
    }
    public ngOnInit(): void {
        this.regions = this.airportsService.getRegionLookups();
        this.countries = this.airportsService.getCountryLookups(this.selectedRegion);
        this.cities = this.airportsService.getCityLookups(this.selectedCountry);
    }
    public onRegionChanged(newValue: string): void {
        this.selectedRegion = newValue;
        this.countries = this.airportsService.getCountryLookups(this.selectedRegion);
    }

import { Component, OnInit } from '@angular/core';
import { filter } from 'right-angled';

import { AirportsService } from '../data/airports.service';

@Component({
    selector: 'rt-demo-filter-area',
    styleUrls: ['filter-area.component.scss'],
    templateUrl: 'filter-area.component.html'
})
export class FilterAreaComponent implements OnInit {
    public useAdvancedFilters: boolean = false;
    @filter() public airportName: string = null;
    @filter('size') public selectedAirportSize: string = null;
    @filter('type') public selectedAirportType: string = null;
    public airportSizes: any;
    public airportTypes: any;
    constructor(private airportsService: AirportsService) {
    }
    public ngOnInit(): void {
        this.airportSizes = this.airportsService.getAirportSizeLookups();
        this.airportTypes = this.airportsService.getAirportTypeLookups();
    }
    public toggleAdvancedFilters(): void {
        this.useAdvancedFilters = !this.useAdvancedFilters;
    }
}

import { Component, OnInit } from '@angular/core';
import { filter } from 'right-angled';

import { AirportsService } from '../data/airports.service';

@Component({
    selector: 'rt-demo-additional-filter',
    styleUrls: ['../filter-area/filter-area.component.scss'],
    templateUrl: 'additional-filter.component.html'
})
export class AdditionalFilterComponent implements OnInit {
    @filter('regionName') public selectedRegion: string = null;
    @filter('countryName') public selectedCountry: string = null;
    @filter('cityName') public selectedCity: string = null;
    public countries: any;
    public cities: any;
    public regions: any;
    constructor(private airportsService: AirportsService) {
    }
    public ngOnInit(): void {
        this.regions = this.airportsService.getRegionLookups();
        this.countries = this.airportsService.getCountryLookups(this.selectedRegion);
        this.cities = this.airportsService.getCityLookups(this.selectedCountry);
    }
    public onRegionChanged(newValue: string): void {
        this.selectedRegion = newValue;
        this.countries = this.airportsService.getCountryLookups(this.selectedRegion);
    }
    public onCountryChanged(newValue: string): void {
        this.selectedCountry = newValue;

import { Component, OnInit } from '@angular/core';
import { filter } from 'right-angled';

import { AirportsService } from '../data/airports.service';

@Component({
    selector: 'rt-demo-filter-area',
    styleUrls: ['filter-area.component.scss'],
    templateUrl: 'filter-area.component.html'
})
export class FilterAreaComponent implements OnInit {
    public useAdvancedFilters: boolean = false;
    @filter() public airportName: string = null;
    @filter('size') public selectedAirportSize: string = null;
    @filter('type') public selectedAirportType: string = null;
    public airportSizes: any;
    public airportTypes: any;
    constructor(private airportsService: AirportsService) {
    }
    public ngOnInit(): void {
        this.airportSizes = this.airportsService.getAirportSizeLookups();
        this.airportTypes = this.airportsService.getAirportTypeLookups();
    }
    public toggleAdvancedFilters(): void {
        this.useAdvancedFilters = !this.useAdvancedFilters;
    }
}

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { filter, ListDirective } from 'right-angled';

import { AirportsService } from '../../shared';
import { Observable } from 'rxjs';
import { LookupItem } from '../data/lookup-item';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'rt-demo-filter-area',
    templateUrl: 'filter-area.component.html'
})
export class FilterAreaComponent {
    @Input() public list: ListDirective = null;
    @filter() public airportName: string = null;
    @filter('airportSize') public selectedAirportSize: string = null;
    @filter('airportType') public selectedAirportType: string = null;
    public airportSizes$: Observable;
    public airportTypes$: Observable;
    constructor(private airportsService: AirportsService) {
        this.airportSizes$ = this.airportsService.getAirportSizeLookups();
        this.airportTypes$ = this.airportsService.getAirportTypeLookups();
    }
}

import { filter, ListDirective } from 'right-angled';

import { AirportsService } from '../../shared';
import { Observable } from 'rxjs';
import { LookupItem } from '../data/lookup-item';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'rt-demo-filter-area',
    templateUrl: 'filter-area.component.html'
})
export class FilterAreaComponent {
    @Input() public list: ListDirective = null;
    @filter() public airportName: string = null;
    @filter('airportSize') public selectedAirportSize: string = null;
    @filter('airportType') public selectedAirportType: string = null;
    public airportSizes$: Observable;
    public airportTypes$: Observable;
    constructor(private airportsService: AirportsService) {
        this.airportSizes$ = this.airportsService.getAirportSizeLookups();
        this.airportTypes$ = this.airportsService.getAirportTypeLookups();
    }
}