Friday, November 30, 2018

Creating custom Pipe and Directive in AngularJS6

1- Create your custom pipe using command ng g p change
2- This will create a change.pipe.ts and make its corresponding entries in module.ts file inside declarations[]
3- We can over ride transform(value: any, ...args) to perform our custom behaviour by implementing pipe
transform(value: any, ...args): any {
console.log(value, args);
if(args[0])
{
return value = value + 'first value is ture';
}
else if(args[1] === "singlequote")
{
return value = value + "'";
}
else{
return value;
}

}
4- In html file
{{"this is formated with custom pipes" | change : true : "singlequote"}}
1- Create your custom directive using command ng g d siddhucustome
2- Override the constructor
@Directive({
selector: '[appSiddhucustome]'
})
export class SiddhucustomeDirective {
constructor(eL: ElementRef) {
eL.nativeElement.style.color = 'green';
eL.nativeElement.style.background = 'black';
}
}
3- In html
<!--p appSiddhucustome>
this is custome directive example.
<!--/p>

No comments: