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&#

In this Angular DatePipe tutorial, we are going to learn how to use Date Pipe operator to format the date as per the locale rule.  Angular DatePipe offers various predefined date formats; furthermore, we can also customize the date formats using DatePipe.   Angular 14 Date Pipe Example The Angular Date Pipe is a built-in pipe in Angular that formats a date value according to a specified format. The Date Pipe accepts various formats such as year, month, day, hour, minute, and second. To use the Date Pipe in your Angular application, you need to import the DatePipe module from the '@angular/common' package in your component.ts file. Here is an example of using the Date Pipe in an Angular component template: The current date and time is {{ currentDate | date: 'short' }} In the above example, currentDate is a variable containing the current date and time, and the date pipe is used to format the date value using the 'short' format. Now, let's take a look at