Tech Seeker

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'

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

The main objectives of this article are: Implement HTTP Post Create Action Method In API Implement HTTP Post API Call At Student Service In Angular App Student Component Implement Logic To Create A New Student Implement HTTP Put Update Action Method In API Implement HTTP Put API Call-In Student Service Student Component Implement Logic To Update An Existing Student Implement HTTP Delete Action Method In API Implement HTTP Delete API Call At Student Service Student Component Implement Logic To Delete Student Implement HTTP Post Create Action Method In API: Let's try to create a new student record into our database by implementing the HTTP Post Action Method(or Create action method.) in our 'StudentController'. API_Project/Controllers/StudentController.cs: [HttpPost] public async Task<IActionResult> Post(Student.Api.Data.Entities.Student payload) { _myWorldDbContext.Student.Add(payload); await _myWorldDbContext.SaveChangesAsync(); return Ok(payload); } (Line: 1