CSharp-Coder

How to create a form in Angular 14 with validation First, in your component HTML file, you can create a form using the form and input tags. In this example, we will create a simple login form with two inputs: email and password. We will also add some validation rules to ensure that the user enters a valid email address and that the password is at least 8 characters long: < form # loginForm = "ngForm" ( ngSubmit )= "submitLoginForm()" > < div > < label > Email: </ label > < input type = "email" name = "email" ngModel required email > < div * ngIf = "loginForm.controls.email.errors?.required" > Email is required. </ div > < div * ngIf = "loginForm.controls.email.errors?.email" > Email is invalid. </ div > </ div > < div > < label > Password: </ label > < input type = "...

Last updated: October 21, 2026 · Tested with Angular 22.2.3 (CLI and router), RxJS 7.8.2, TypeScript 6.0.3, Vitest 5.0.5, Node 24.21, headless Edge 155, Windows 11 Short answer: in current Angular an AuthGuard is a plain function of type CanActivateFn . It gets services with inject() , returns true to let the user in, and returns a UrlTree to send them to the login page. You add it to a route with canActivate: [authGuard] : import { inject } from '@angular/core'; import { CanActivateFn, Router } from '@angular/router'; import { AuthService } from './auth.service'; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.isLoggedIn()) { return true; } // Return a UrlTree instead of calling router.navigate() and returning false return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } }); }; I wrote the first version of this post...

Last updated: September 28, 2026 · Tested with Angular 22.2 ( @angular/common ) on Node 22 Short answer: the Angular date pipe is {{ value | date:'format':'timezone':'locale' }} . With no arguments it prints mediumDate ( Sep 28, 2026 ). Use a preset such as 'short' , 'medium' or 'fullDate' when you want locale-correct output, and a custom pattern such as 'dd/MM/yyyy HH:mm' when the format is fixed by your API or your users. The two mistakes that generate most of the questions about it are passing a non-ISO string (you get NG02311: Unable to convert "28/09/2026" into a date ) and forgetting that the pipe converts to the browser's time zone unless you pass one. This page is a tested reference: one fixed instant ( 2026-09-28T14:05:09.123Z ) formatted with every preset, the useful custom symbols, five time zones and five locales, so you can look up what a pattern prints instead of guessing. It applies to Angular...

Last updated: October 20, 2026 · Tested with Angular CLI 22.2.3 on Node 24.21, ASP.NET Core 10 (runtime 10.0.12), nginx 1.30.6, http-server 14.1.1 and serve 14.2.6, Windows 11 Short answer: your Angular app works until you refresh a page or open a deep link like /products/42 , then the server returns 404 Not Found . The server is looking for a file called products/42 and there isn't one: only the Angular router knows that route. The fix is a fallback rule that returns index.html for every URL that isn't a real file, so Angular can boot and route it: ASP.NET Core: app.MapFallbackToFile("index.html"); nginx: try_files $uri $uri/ /index.html; IIS: a URL Rewrite rule in web.config (and the URL Rewrite module installed) Apache: FallbackResource /index.html I first wrote this post in 2022 with only the IIS rule. For this update I built a fresh Angular 22 app and tested every server below. The basic fix takes one line, but a careless fallback creates three ...

How to Perform CRUD Operation Using Angular 14 In this article, we will learn the angular crud (create, read, update, delete) tutorial with ASP.NET Core 6 web API. We will use the SQL Server database and responsive user interface for our Web app, we will use the Bootstrap 5. Let's start step by step. Step 1 - Create Database and Web API First we need to create Employee database in SQL Server and web API to communicate with database. so you can use my previous article CRUD operations in web API using net 6.0 to create web API step by step. As you can see, after creating all the required API and database, our API creation part is completed. Now we have to do the angular part like installing angular CLI, creating angular 14 project, command for building and running angular application...etc. Step 2 - Install Angular CLI Now we have to install angular CLI into our system. If you have already installed angular CLI into your system then skip this step.  To install angular CLI ope...