How to use right-angled - 10 common examples
To help you get started, we’ve selected a few right-angled examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
eastbanctechru / right-angled / src / live-demo / shared / additional-filter / additional-filter.component.ts View on Github 
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();
}
}import { RTBufferedPager } from 'right-angled';
RTBufferedPager.settings.defaultRowCount = 10;
RTBufferedPager.settings.minRowCount = 5;
RTBufferedPager.settings.maxRowCount = 1000;
export class AppComponent {}import { RTBufferedPager } from 'right-angled';
RTBufferedPager.settings.defaultRowCount = 10;
RTBufferedPager.settings.minRowCount = 5;
RTBufferedPager.settings.maxRowCount = 1000;
export class AppComponent {}import { RTBufferedPager } from 'right-angled';
RTBufferedPager.settings.defaultRowCount = 10;
RTBufferedPager.settings.minRowCount = 5;
RTBufferedPager.settings.maxRowCount = 1000;
export class AppComponent {}right-angled
Lightweight and easy to use angular data grids. Integrates with your markup and styles rather than generating its own.
