Skip to main content

Posts

Showing posts from June, 2022

Angular 14 Reactive Forms Example

In this article, we will explore the Angular(14) reactive forms with an example. Reactive Forms: Angular reactive forms support model-driven techniques to handle the form's input values. The reactive forms state is immutable, any form filed change creates a new state for the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously. Some key notations that involve in reactive forms are like: FormControl - each input element in the form is 'FormControl'. The 'FormControl' tracks the value and validation status of form fields. FormGroup - Track the value and validate the state of the group of 'FormControl'. FormBuilder - Angular service which can be used to create the 'FormGroup' or FormControl instance quickly. Form Array - That can hold infinite form control, this helps to create dynamic forms. Create An Angular(14) Application: Let'

Angular 14 Crud Example

In this article, we will implement CRUD operation in the Angular 14 application. Angular: Angular is a framework that can be used to build a single-page application. Angular applications are built with components that make our code simple and clean. Angular components compose of 3 files like TypeScript File(*.ts), Html File(*.html), CSS File(*.cs) Components typescript file and HTML file support 2-way binding which means data flow is bi-directional Component typescript file listens for all HTML events from the HTML file. Create Angular(14) Application: Let's create an Angular(14) application to begin our sample. Make sure to install the Angular CLI tool into our local machine because it provides easy CLI commands to play with the angular application. Command To Install Angular CLI npm install -g @angular/cli Run the below command to create the angular application. Command To Create Angular Application ng new name_of_your_app Note: While creating the app, you will see a noti

Part-2 A Demo On JWT Access Token And Refresh Token Authentication In .NET6 Web API

In this article, we will learn the generation and usage of the refresh token in .NET6 Web API application. Click here to understand the implementation of the JWT token in .NET6 Web API. Refresh Token: When the JWT access token expires to renew it without user credentials we will use the Refresh Token. Let's understand the flow of  Refresh Token. The user sends valid 'User Name' and 'Password' to the server, then the server will generate JWT Access Token and Refresh Token sent as a response The JWT Access Token is a short live token(eg 20 minutes) and Refresh Token is a long live token(eg: 7 days) Now client application sends a JWT access token in the request header that makes the user authenticated. If the JWT token expires then the server returns 401 unauthorized responses. Then the client sends the refresh token to the server to regenerate the JWT Access token. The server validates the refresh token and returns a new JWT Access Token and a new Refresh Token as a r