Angular 9 Tutorial For Beginners #27 - Custom Pipes

[@alex2342846]

I found one of most easiest way to learn angular via this videos, keep up good work , it really helps

[@ARCTutorials]

Great to hear! Thanks and Welcome buddy. Also please do check out Angular 10 series. kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@murtazamohammadi9370]

I bought a course on Udemy and followed this course but I did not learned anything. To be honest, I learned angular here. thanks for your effort and thanks for sharing your knowledge with us.

[@ARCTutorials]

You're very welcome!

[@gokultalks7253]

Wow 💪❤️great waiting for next one !

[@ARCTutorials]

Hope you are following the full tutorial series. Cheers

[@raghuvardhansaripalli9636]

Hi Sridhar, Namastey. Your explanation is simply simply superb with very good explanation and clear cut vocabulary and voice. All your videos has a zeal to get the subject understand for the learners. Others will prepare videos just to put up a SHOW that they only know the subject and keep on going to explain the subject like a BULLET TRAIN. And they never think whether the learners are understanding the subject. I will follow the upcoming videos as well. By the way, if you know GRAPHQL + ANGULAR + SPRING BOOT, could you please develop some videos on this stack. Thank you so much, God bless you..:)

[@ARCTutorials]

Thank you so much Raghu for your kind words 👍

[@europe_life5943]

Hi Shridhar .......... Thank you for great videos........ i just wanted to tell that in this video you didn't explain about transform arguments..... so i got confused....... I understand the concept now........ but though to mention about it

[@sreenuksr]

Angular 9 Tutorial For Beginners #27 - Custom Pipes - We can generate custom pipe using CLI -> ng generate pipe - Pipes need to be added , but when we generate it will automatically added to module - We need to import the Pipe and PipeTransform from the @angular/core - Pipes are declared with the decorator @Pipe and provide the selector name Example #1: app.component.html {{userinfo.city|highlight:userinfo.city}} highligh.pipe.ts transform(value: string, cityname :string): string { return "City Name Is - "+ cityname; } Example #2: highligt.pipe.ts import { DomSanitizer} from '@angular/platform-browser'; export class HighlightPipe implements PipeTransform { constructor (private sanitizor:DomSanitizer){}; transform(value: string, cityname :string): any { return this.sanitizor.bypassSecurityTrustHtml(''+cityname+''); } }

[@jacksm8709]

very straight and simplified

[@roshnis8552]

Superb...thankyou

[@ARCTutorials]

Thank you Roshni for your kind words 🙏

[@josbexerr5166]

Gran Maestro.... gracias

[@ARCTutorials]

Thank you so much for your kind words and encouragement

[@onetwothree2834]

Thank you very much for your great explanations

[@ARCTutorials]

You are most welcome

[@dhavaldokhe3184]

Im begineer of angular which series i should watch?

[@sravaninuthi894]

Sir, I heard about pure pipe and impure pipe could you tell me about this sir.

[@RajRaj-dj5sn]

How to use the first parameter in transform method ie. 'value' ? What is the use of it ??

[@8manjusha]

Hello Sir, what does first parameter value denote, is it needed to be passed allwaz and on what basis its data type is decided?

[@user-rp9iis1en6h]

Can u make video on angular resource caching using browser cache storage

[@mp-fg2zw]

Thanks Sridhar for the video. One question I have, Do we require to use 'city' parameter in the transform function of pipe class? It worked for me with only one parameter. "transform(value:string){ return value;}". Request you to suggest me on this.

[@ARCTutorials]

Hi mp. We can pass any number of parameters. Its upon us how many parameters we want to pass

[@kiranmoulimouli4283]

Hii sir Iam following ur tutorials without missing any one I understanded evry class but in custom pipes u imported domsanitizer and returedbypass... Something like that plz explain that Sir I don't even understand wat ur doning being a beginner how can I understand that domsanitizer plz explain it sir

[@ARCTutorials]

Hi Kiran. I understand that DomSanitizer and other modules are little tricky for beginners. I will cover them again in other tutorials in details. For now, you can skip that piece if it confuses you. Continue learning other tutorials in playlist. Regards Sridhar

[@pratibhatomar9230]

@@ARCTutorials same here. I am also a beginner. And the terms are little confusing for me as well. I will take your advice and will continue forward.

[@rangarajumanthena3643]

Can you please give a small example how to use variable binding in custom pipeline

[@ARCTutorials]

Hi Ranga. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@HadiArshu]

hello sir in custom pipe what is the role of domsenetizer and related terms used in this

[@ARCTutorials]

Using DOMSanitizer helps in cleaning the DOM and making it secure.

[@yash_jivrajani]

DOMException: Failed to execute 'setAttribute' on 'Element': '{' is not a valid attribute name. on

[@ChandeckTv001]

good evening sir sridhar ,,i wasnt able to crack the phone number format can you shed more light please

[@ARCTutorials]

Hi Buddy. Please try this out stackblitz.com/edit/angular-customer-pipe-phone

[@ChandeckTv001]

@@ARCTutorials thank you sir

[@ChandeckTv001]

Can i have your email address sir

[@rajnish1002]

Custom pipe little complicated fr bgnr ,🙂 but good going on

[@ARCTutorials]

Thanks buddy!!

[@hashirahmed8085]

Dear Sir what if we use table and want to highlight a specfic table row, how will we do it. Please provide code if possible

[@athirajyothishkumar6933]

This is what I tried and it worked,

[@ARCTutorials]

Absolutely right!!!

[@siddharthdandamudi9549]

Hi in this episode you made it a little complicated with sanitizer and other stuff can you explain it better as using that made it complicated

[@AnilPatel-ox1jw]

Hello sir plz create one full project in angular 9

[@ARCTutorials]

Hi Anil. Yes i will start full live application development after i have completed the basic topics soon. Hopefully in a week. Thanks for watching. Please subscribe so you wont miss out on the tutorials.

[@kartikeykamal4809]

its important !!! how to Create custom pipe to show date in specific format in angular

[@kratibakshi4674]

sir i'm trying to bind click event on button click, but not getting output. PL help and also give the solution for it "How to bind click event on button inside custom pipe on". Snippet code :(customPipe.ts file code) export class CustomPipe implements PipeTransform { constructor( private sanitizer: DomSanitizer) {} transform(value: any, ...args: any[]): any { return this.sanitizer.bypassSecurityTrustHtml(value + '...' + 'read more'); } read() { console.log('clicked'); } } PL replay as soon as possible. I'm stuck

[@krishnachaitanya3169]

Sir, if i want to highlight designation according to employee age it is not working....it is the code what i have written please resolve my issue sir.... export class HighlightPipe implements PipeTransform { constructor(private sanitizer:DomSanitizer){} transform(desg:string,age:number): any { if(age===32){ return this.sanitizer.bypassSecurityTrustHtml('' +desg+''); } else{ return this.sanitizer.bypassSecurityTrustHtml('' +desg+''); } } } and my html code is

[@henleibovich3775]

Could you please send me the notes and slides of the entire series?

[@henleibovich3775]

[e-mail]

[@henleibovich3775]

Can you?

[@rajeshwarans9127]

Thank you very much for your great explanations

[@ARCTutorials]

Thanks Rajeshwaran for your kind words