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 = "...

How to add router guard in Angular? Angular Router guards are used to prevent unauthorized access to certain routes in your Angular application. There are several types of guards that you can use with the Angular Router, including canActivate, canActivateChild, canDeactivate, and canLoad. Here is an example of how to use the canActivate guard to protect a route in your Angular application: First, create a new guard using the Angular CLI by running the following command in your terminal: ng generate guard auth This will create a new guard called 'auth' in your src/app/auth directory. Open the newly created auth.guard.ts file and add the following code:  import { Injectable } from '@angular/core' ; import { CanActivate , ActivatedRouteSnapshot , RouterStateSnapshot , UrlTree } from '@angular/router' ; import { Observable } from 'rxjs' ; import { AuthService } from './auth.service' ; import { Router } from '@angular/router...

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...