#angular - Pipe Examples
@Input() formDataObj;
pageProps = [];
private oldFormSetup() {
const formDataObj = {};
for (const propName of Object.keys(this.formDataObj)) {
console.log('prop name', propName);
formDataObj[propName] = new FormControl(this.formDataObj[propName]);
console.log('value', formDataObj[propName].value);
this.pageProps.push({
key: propName,
label: propName,
value: formDataObj[propName].value,
type: this.typeOf(formDataObj[propName].value)
});
console.log('pageProps', this.pageProps);
console.log('formData', formDataObj);
}
this.form = new FormGroup(formDataObj);
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter((item) => {
return item.toLowerCase().includes(searchText);
});
}
}
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'key'
})
export class KeyPipe implements PipeTransform {
public transform(value: any, args?: any): any {
return Object.keys(value);
}
}
import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";
/**
* Generated class for the SafeHtmlPipe pipe.
*
* See https://angular.io/api/core/Pipe for more info on Angular Pipes.
*/
@Pipe({
name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer:DomSanitizer){}
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
import { Pipe, PipeTransform } from '@angular/core';
import {
DomSanitizer,
SafeHtml,
SafeStyle,
SafeScript,
SafeUrl,
SafeResourceUrl
} from '@angular/platform-browser';
@Pipe({
name: 'safe'
})
export class SafePipe implements PipeTransform {
constructor(protected sanitizer: DomSanitizer) {}
public transform(
value: any,
type: string
): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
switch (type) {
case 'html':
return this.sanitizer.bypassSecurityTrustHtml(value);
case 'style':
return this.sanitizer.bypassSecurityTrustStyle(value);
case 'script':
return this.sanitizer.bypassSecurityTrustScript(value);
case 'url':
return this.sanitizer.bypassSecurityTrustUrl(value);
case 'resourceUrl':
return this.sanitizer.bypassSecurityTrustResourceUrl(value);
default:
throw new Error(`Invalid safe type specified: ${type}`);
}
}
}
import { Injectable, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'searchfilter'
})
@Injectable()
export class SearchFilterPipe implements PipeTransform {
transform(items: any[], field: string, value: string): any[] {
if (!items) return [];
return items.filter((it) => it[field] == value);
}
}