The latest articles on DEV Community by vetriselvan Panneerselvam (@vetriselvan_11). https://dev.to/vetriselvan_11 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3256427%2Fb4d97c63-fc86-420b-9fc9-217a62f4ba8a.png https://dev.to/vetriselvan_11 en vetriselvan Panneerselvam Thu, 09 Jul 2026 18:47:42 +0000 https://dev.to/vetriselvan_11/zip-operator-in-rxjs-10b6 https://dev.to/vetriselvan_11/zip-operator-in-rxjs-10b6 <p>Hey, Devs!</p> <p>Imagine a scenario where you're calling two different observables and need to combine their responses pair by pair. Instead of manually coordinating the emissions, you can use the RxJS zip operator.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxq99llb6ju4k7tlyrmxl.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxq99llb6ju4k7tlyrmxl.png" alt=" " width="800" height="800"></a></p> <p>Observable A emits every 1 second, while Observable B emits every 3 seconds. The zip operator waits until all input observables have emitted one value before producing an output.</p> <p>Although Observable A emits multiple values before Observable B emits its first, zip pairs values by their emission order. So, the first value from A is paired with the first value from B, the second with the second, and so on. Values from the faster observable are buffered until the corresponding value from the slower observable becomes available. </p> rxjs zip operator javascript vetriselvan Panneerselvam Mon, 06 Jul 2026 12:27:00 +0000 https://dev.to/vetriselvan_11/master-angular-dependency-injection-self-skipself-host-optional-with-real-examples-446f https://dev.to/vetriselvan_11/master-angular-dependency-injection-self-skipself-host-optional-with-real-examples-446f <p><a href="https://medium.com/@vetriselvan_11/master-angular-dependency-injection-self-skipself-host-optional-with-real-examples-6249be2be255?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fht97xw0j73f97faofywl.png" width="800" height="449"></a></p> <p>A complete guide to Angular DI resolution strategies. Learn how Angular searches injectors, resolves services, handles NullInjectorError</p> <p><a href="https://medium.com/@vetriselvan_11/master-angular-dependency-injection-self-skipself-host-optional-with-real-examples-6249be2be255?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> injectable services angular host vetriselvan Panneerselvam Thu, 02 Jul 2026 02:02:13 +0000 https://dev.to/vetriselvan_11/rxjs-pipe-operator-350a https://dev.to/vetriselvan_11/rxjs-pipe-operator-350a <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv7t2wmfpybya1bljvms3.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fv7t2wmfpybya1bljvms3.png" alt=" " width="800" height="800"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F80ivanoqipr0iev37gt3.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F80ivanoqipr0iev37gt3.png" alt=" " width="800" height="800"></a></p> rxjs operator webdev javascript vetriselvan Panneerselvam Thu, 07 May 2026 18:05:47 +0000 https://dev.to/vetriselvan_11/atomic-design-explained-create-reusable-and-maintainable-web-components-jjd https://dev.to/vetriselvan_11/atomic-design-explained-create-reusable-and-maintainable-web-components-jjd <p>Modern UI development becomes much easier when interfaces are built systematically and reusable components are designed with scalability in mind. In this blog, I explored how Atomic Design helps create clean, maintainable, and consistent user interfaces by breaking them down into:</p> <ul> <li>Atoms</li> <li>Molecules</li> <li>Organisms</li> <li>Templates</li> <li>Pages</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fedk6i58r2aa79zqisdjn.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fedk6i58r2aa79zqisdjn.png" alt=" " width="800" height="800"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frnxfnto3dbsorgflstg2.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frnxfnto3dbsorgflstg2.png" alt=" " width="800" height="800"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwany7i210d2srqmat7jy.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwany7i210d2srqmat7jy.png" alt=" " width="800" height="800"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmii16aky70f7m950c5xr.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmii16aky70f7m950c5xr.png" alt=" " width="800" height="800"></a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzv6ul9dev9z4h73on2on.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzv6ul9dev9z4h73on2on.png" alt=" " width="800" height="800"></a></p> <p>Thanks for reading! If this was helpful, consider clapping 👏 and following for more full-stack tips. Do you have questions or suggestions? Drop them in the response below!</p> <p>👉 Connect me on <a href="https://www.linkedin.com/in/vetriselvan-panneerselvam" rel="noopener noreferrer">LinkedIn</a> for more content on Web Development, Frontend Architecture, UI Design Systems, and modern technologies.</p> <p>✍️ Author: Vetriselvan Panneerselvam</p> <p>👨‍💻 Full Stack Developer | 💡 Code Enthusiast | 📚 Lifelong Learner | ✍️ Tech Blogger | 🌍 Freelance Developer</p> webdev atomicdesignpattern designpatterns vetriselvan Panneerselvam Tue, 21 Apr 2026 18:29:48 +0000 https://dev.to/vetriselvan_11/angular-signal-forms-custom-validation-made-simple-step-by-step-guide-jok https://dev.to/vetriselvan_11/angular-signal-forms-custom-validation-made-simple-step-by-step-guide-jok <p><a href="https://medium.com/@vetriselvan_11/angular-signal-forms-custom-validation-made-simple-step-by-step-guide-2a790d06f281?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbtvdkymrtrpaxehiuu28.png" width="800" height="450"></a></p> <p>Learn how to implement custom validations in Angular Signal Forms with practical examples. Improve form handling, performance, and ux.</p> <p><a href="https://medium.com/@vetriselvan_11/angular-signal-forms-custom-validation-made-simple-step-by-step-guide-2a790d06f281?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> angularsignals angularsignalforms validation customvalidator vetriselvan Panneerselvam Thu, 09 Apr 2026 05:59:25 +0000 https://dev.to/vetriselvan_11/angular-21-signal-forms-the-ultimate-guide-to-signal-based-inputs-4p9j https://dev.to/vetriselvan_11/angular-21-signal-forms-the-ultimate-guide-to-signal-based-inputs-4p9j <p><a href="https://medium.com/@vetriselvan_11/angular-21-signal-forms-the-ultimate-guide-to-signal-based-inputs-cd234b0ce5cc?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw5sxjia8l7paizss1ck9.png" width="800" height="450"></a></p> <p>Master the new Signal-based form system in Angular 21. Learn how to migrate from Reactive Forms, handle validation with Signals.</p> <p><a href="https://medium.com/@vetriselvan_11/angular-21-signal-forms-the-ultimate-guide-to-signal-based-inputs-cd234b0ce5cc?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> formfield angular21 signalforms angularsignalforms vetriselvan Panneerselvam Tue, 07 Apr 2026 00:23:13 +0000 https://dev.to/vetriselvan_11/mastering-typescript-a-deep-dive-into-satisfies-and-inferred-type-predicates-1bjm https://dev.to/vetriselvan_11/mastering-typescript-a-deep-dive-into-satisfies-and-inferred-type-predicates-1bjm <p><a href="https://medium.com/@vetriselvan_11/mastering-typescript-a-deep-dive-into-satisfies-and-inferred-type-predicates-5580d450711e?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuw5y9dsuvawpjn4qf3da.png" width="800" height="450"></a></p> <p>Learn how to write cleaner, safer code with the TypeScript satisfies operator and the new auto-inferred type predicates in TS 5.5.</p> <p><a href="https://medium.com/@vetriselvan_11/mastering-typescript-a-deep-dive-into-satisfies-and-inferred-type-predicates-5580d450711e?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> advancetypescipt satisfiesoperator typewideningvssatisf typescript vetriselvan Panneerselvam Thu, 02 Apr 2026 07:51:26 +0000 https://dev.to/vetriselvan_11/master-typescript-decorators-by-building-an-automated-retry-utility-4c7e https://dev.to/vetriselvan_11/master-typescript-decorators-by-building-an-automated-retry-utility-4c7e <p><a href="https://medium.com/@vetriselvan_11/master-typescript-decorators-by-building-an-automated-retry-utility-c64aed2fe3b2?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu5yzsvfd3alblnut14vu.png" width="800" height="450"></a></p> <p>Take a deep dive into Method Decorators. Step-by-step guide on creating a @Retry annotation to automatically re-invoke failed functions.</p> <p><a href="https://medium.com/@vetriselvan_11/master-typescript-decorators-by-building-an-automated-retry-utility-c64aed2fe3b2?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> decorators customdecorator promises typescript vetriselvan Panneerselvam Wed, 01 Apr 2026 03:22:38 +0000 https://dev.to/vetriselvan_11/typescript-decorators-building-a-high-performance-custom-debounce-36mh https://dev.to/vetriselvan_11/typescript-decorators-building-a-high-performance-custom-debounce-36mh <p><a href="https://medium.com/@vetriselvan_11/typescript-decorators-building-a-high-performance-custom-debounce-38f6cad4bda5?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3oz3rl6tkqfpc3e67eq2.png" width="800" height="450"></a></p> <p>Move your debounce logic out of your components and into reusable decorators. Explore the TypeScript method decorators through an example.</p> <p><a href="https://medium.com/@vetriselvan_11/typescript-decorators-building-a-high-performance-custom-debounce-38f6cad4bda5?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> typescript customdebounce debounce decorators vetriselvan Panneerselvam Wed, 25 Mar 2026 00:48:33 +0000 https://dev.to/vetriselvan_11/angular-signal-forms-how-to-implement-formarray-with-signals-step-by-step-2486 https://dev.to/vetriselvan_11/angular-signal-forms-how-to-implement-formarray-with-signals-step-by-step-2486 <p><a href="https://medium.com/@vetriselvan_11/angular-signal-forms-how-to-implement-formarray-with-signals-step-by-step-c4e3d5a138d2?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frcasme6v1d4a1k1n0wcz.png" width="800" height="600"></a></p> <p>Learn how to build dynamic FormArrays using Angular Signal-based forms. Includes a step-by-step intro and practical code examples</p> <p><a href="https://medium.com/@vetriselvan_11/angular-signal-forms-how-to-implement-formarray-with-signals-step-by-step-c4e3d5a138d2?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> angular signalforms formfield signal vetriselvan Panneerselvam Fri, 20 Mar 2026 06:02:17 +0000 https://dev.to/vetriselvan_11/ng-diagram-angular-guide-create-custom-nodes-and-drag-and-drop-palette-jkg https://dev.to/vetriselvan_11/ng-diagram-angular-guide-create-custom-nodes-and-drag-and-drop-palette-jkg <p><a href="https://medium.com/@vetriselvan_11/ng-diagram-angular-guide-create-custom-nodes-and-drag-and-drop-palette-0835c5d66a85?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fibxeiqol7yuno6uy2jbw.png" width="800" height="600"></a></p> <p>H ey devs 👋</p> <p><a href="https://medium.com/@vetriselvan_11/ng-diagram-angular-guide-create-custom-nodes-and-drag-and-drop-palette-0835c5d66a85?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> customnode ngdiagram draganddrop flowdiagram vetriselvan Panneerselvam Wed, 11 Mar 2026 09:53:54 +0000 https://dev.to/vetriselvan_11/build-interactive-node-diagrams-in-angular-21-using-ng-diagram-49n4 https://dev.to/vetriselvan_11/build-interactive-node-diagrams-in-angular-21-using-ng-diagram-49n4 <p><a href="https://medium.com/@vetriselvan_11/build-interactive-node-diagrams-in-angular-21-using-ng-diagram-b274edef286f?source=rss-7b84cfd6b858------2" rel="noopener noreferrer"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhx8g8mh3s8ukburzmvhe.png" width="800" height="600"></a></p> <p>Learn how to build interactive node-based diagrams in Angular 21 using ng-diagram, including draggable nodes, link connections, and…</p> <p><a href="https://medium.com/@vetriselvan_11/build-interactive-node-diagrams-in-angular-21-using-ng-diagram-b274edef286f?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> angular21 bpmndiagram ngdiagram flowdiagram