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.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3256427%2Fb4d97c63-fc86-420b-9fc9-217a62f4ba8a.png https://dev.to/vetriselvan_11 en 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 vetriselvan Panneerselvam Sun, 08 Feb 2026 06:04:20 +0000 https://dev.to/vetriselvan_11/angular-custom-schematics-step-by-step-guide-to-create-your-own-generators-4l3d https://dev.to/vetriselvan_11/angular-custom-schematics-step-by-step-guide-to-create-your-own-generators-4l3d <p><a href="https://medium.com/@vetriselvan_11/angular-custom-schematics-step-by-step-guide-to-create-your-own-generators-36a0b13b5c22?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%2Fodpmgzipxvz6flnx51mh.png" width="800" height="600"></a></p> <p>Learn how to create custom Angular schematics from scratch. This step-by-step guide covers setup, templates, collection.json, best…</p> <p><a href="https://medium.com/@vetriselvan_11/angular-custom-schematics-step-by-step-guide-to-create-your-own-generators-36a0b13b5c22?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> angularschematics schematics angularmonorepo angular21 vetriselvan Panneerselvam Sat, 24 Jan 2026 19:43:08 +0000 https://dev.to/vetriselvan_11/deploy-angular-application-on-github-pages-step-by-step-guide-4fc0 https://dev.to/vetriselvan_11/deploy-angular-application-on-github-pages-step-by-step-guide-4fc0 <p><a href="https://medium.com/@vetriselvan_11/deploy-angular-application-on-github-pages-step-by-step-guide-b5af362b385f?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%2F326nb01jqjgc8vxb721s.png" width="800" height="380"></a></p> <p>Learn how to deploy your Angular app to GitHub Pages quickly and correctly, including build setup, base-href configuration.</p> <p><a href="https://medium.com/@vetriselvan_11/deploy-angular-application-on-github-pages-step-by-step-guide-b5af362b385f?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> portfolio angular21 webhosting githubpages vetriselvan Panneerselvam Sat, 24 Jan 2026 10:30:42 +0000 https://dev.to/vetriselvan_11/angular-21-monorepo-micro-frontends-with-native-federation-1cla https://dev.to/vetriselvan_11/angular-21-monorepo-micro-frontends-with-native-federation-1cla <p><a href="https://medium.com/@vetriselvan_11/angular-21-monorepo-micro-frontends-with-native-federation-0d9db7d30fbb?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%2F2fr0qwvdbsp985z6cyxw.png" width="800" height="600"></a></p> <p>Learn how to build a micro frontend architecture in an Angular 21 monorepo using Native Federation.</p> <p><a href="https://medium.com/@vetriselvan_11/angular-21-monorepo-micro-frontends-with-native-federation-0d9db7d30fbb?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> angular21 angularmicrofrontend webpack nativefederation vetriselvan Panneerselvam Wed, 21 Jan 2026 07:33:12 +0000 https://dev.to/vetriselvan_11/authjs-nextauth-v5-credentials-authentication-in-nextjs-app-router-complete-guide-4mob https://dev.to/vetriselvan_11/authjs-nextauth-v5-credentials-authentication-in-nextjs-app-router-complete-guide-4mob <p><a href="https://medium.com/@vetriselvan_11/auth-js-nextauth-v5-credentials-authentication-in-next-js-app-router-complete-guide-ef77aaae7fdf?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%2Fhfljpvh1tvrs9241dvqt.png" width="800" height="600"></a></p> <p>Learn how to implement Credentials-based authentication (email &amp; password) in Next.js App Router using Auth.js (NextAuth v5 beta), Prisma.</p> <p><a href="https://medium.com/@vetriselvan_11/auth-js-nextauth-v5-credentials-authentication-in-next-js-app-router-complete-guide-ef77aaae7fdf?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> credentials prisma nextjs authjs vetriselvan Panneerselvam Mon, 19 Jan 2026 03:31:36 +0000 https://dev.to/vetriselvan_11/build-a-nextjs-login-system-with-postgresql-prisma-and-jwt-authentication-17hl https://dev.to/vetriselvan_11/build-a-nextjs-login-system-with-postgresql-prisma-and-jwt-authentication-17hl <p><a href="https://medium.com/@vetriselvan_11/build-a-next-js-login-system-with-postgresql-prisma-and-jwt-authentication-5b028bf0491a?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%2Ft5jb483ikmpwkvatvdgl.png" width="800" height="600"></a></p> <p>Learn how to create a full-stack Next.js login page using Tailwind CSS, PostgreSQL, Prisma ORM, and JWT authentication with API routes.</p> <p><a href="https://medium.com/@vetriselvan_11/build-a-next-js-login-system-with-postgresql-prisma-and-jwt-authentication-5b028bf0491a?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> nextjs postgressql bcryptjs prismaorm vetriselvan Panneerselvam Tue, 16 Dec 2025 02:32:49 +0000 https://dev.to/vetriselvan_11/angular-21-makes-debugging-signals-easier-with-built-in-devtools-formatters-2m3e https://dev.to/vetriselvan_11/angular-21-makes-debugging-signals-easier-with-built-in-devtools-formatters-2m3e <p><a href="https://medium.com/@vetriselvan_11/angular-21-makes-debugging-signals-easier-with-built-in-devtools-formatters-b4d668c216f9?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%2Fidb153r8uwn5zedh4m19.png" width="800" height="600"></a></p> <p>Angular 21 a built-in DevTools formatter. Learn how to enable custom formatters, understand how Angular’s signal formatter works.</p> <p><a href="https://medium.com/@vetriselvan_11/angular-21-makes-debugging-signals-easier-with-built-in-devtools-formatters-b4d668c216f9?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> angularsignals debugging chromedevtools formatting vetriselvan Panneerselvam Thu, 11 Dec 2025 01:57:58 +0000 https://dev.to/vetriselvan_11/why-the-meta-viewport-tag-is-essential-for-responsive-web-design-4448 https://dev.to/vetriselvan_11/why-the-meta-viewport-tag-is-essential-for-responsive-web-design-4448 <p><a href="https://medium.com/@vetriselvan_11/why-the-meta-viewport-tag-is-essential-for-responsive-web-design-fe3dc2587685?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%2F7kdc5k2dmdd8dor2yaxb.png" width="800" height="800"></a></p> <p>Understand what width=device-width really does and why your mobile CSS breaks without the meta viewport tag.</p> <p><a href="https://medium.com/@vetriselvan_11/why-the-meta-viewport-tag-is-essential-for-responsive-web-design-fe3dc2587685?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> viewportmetatag html mobilebrowser devicewidth vetriselvan Panneerselvam Fri, 14 Nov 2025 02:56:03 +0000 https://dev.to/vetriselvan_11/javascript-fallback-values-explained-or-vs-nullish--59kh https://dev.to/vetriselvan_11/javascript-fallback-values-explained-or-vs-nullish--59kh <p><a href="https://medium.com/@vetriselvan_11/javascript-fallback-values-explained-or-vs-nullish-3fe73c58dbe3?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%2F4rqd4qkzz9torj2zitum.png" width="800" height="600"></a></p> <p>Learn the real difference between JavaScript’s OR (||) and nullish coalescing (??) operators. Understand when to use each, how to handle .</p> <p><a href="https://medium.com/@vetriselvan_11/javascript-fallback-values-explained-or-vs-nullish-3fe73c58dbe3?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> javascript nullishcoalescing jstips operatoror vetriselvan Panneerselvam Wed, 29 Oct 2025 02:49:52 +0000 https://dev.to/vetriselvan_11/angular-navigation-with-the-facade-pattern-4eek https://dev.to/vetriselvan_11/angular-navigation-with-the-facade-pattern-4eek <p><a href="https://medium.com/@vetriselvan_11/angular-navigation-with-the-facade-pattern-d43a2605e0f7?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%2F1v1s7acnb0u0nfw22z8s.png" width="800" height="600"></a></p> <p>Abstract your Angular Router logic! Use a Facade service to clean up your components, enforce replaceUrl defaults, and make refactoring…</p> <p><a href="https://medium.com/@vetriselvan_11/angular-navigation-with-the-facade-pattern-d43a2605e0f7?source=rss-7b84cfd6b858------2" rel="noopener noreferrer">Continue reading on Medium »</a></p> navigation angular router facadedesignpattern