Angular is a framework for building web applications using TypeScript, a superset of JavaScript. Angular helps you create dynamic, interactive, and responsive user interfaces by using features such as components, directives, data binding, and routing.

In this post, I am going to design and develop an application using Angular to demonstrate the CRUD operation in a single-page application.

This application code will become a handy one because it consists of modules, services, components, router links, and some bootstrap classes.

I adopted the module feature design, which provided the following benefits:

• A feature module is an Angular module that focuses on a specific functionality or feature of an application, such as user workflow, routing, or forms.
• A feature module is not the root module of the application, but it can collaborate with the root module and other feature modules through the services it provides and the components, directives, and pipes that it shares.
• A feature module can be created using the Angular CLI by generating a new module with the ng generate module command and adding the components, directives, and pipes that belong to that module.
• A feature module can be imported by other modules or lazy loaded on demand, which can improve the performance and modularity of the application.

Additionally, the forms were created using reactive-forms, which handled logic in typescript classes. In contrast, for template-driven design, the form logic was written in HTML files.

More about the Reactive forms in angular:

• Reactive forms are based on a model-driven approach, where the form logic and validation are defined in the component class, not in the template.
• Reactive forms use the ReactiveFormsModule, which provides the FormBuilder service to create and manage form groups and controls programmatically.
• Reactive forms are more robust, scalable, reusable, and testable than template driven forms, as they allow more control over the form state and behavior.
• Reactive forms also support dynamic and nested forms, where the form structure can change at runtime based on the user input or other conditions.
• Reactive forms use the Observable pattern to handle form events and changes, which makes it easier to react to user actions and data flows.

Let’s develop an application for registering, editing, deleting, and listing student details. The file structure is shown below. This application will use local storage to save registered details captured.

Folder structure: components , Models ,Modules and Service.

Restration-Form component: The form is designed to capture the input details using the ReactiveForms concept, which allows us to create and manage the form model in the component class using FormGroup, FormControl. ReactiveForms also provide a model-driven approach to handle form validation and dynamic changes.

RegistrationList component: once the details are captured those details are displayed using this component.

RegistrationService: This service implements CRUD methods for adding, updating, and deleting registration details; to utilise this service, it is decorated with Injectable.

Models: An interface is created for the form input fields.

Routing paths: The page navigation is done in the app-routing modules like below :

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list', component: RegistrationListComponent },
{ path: 'new', component: RegistrationFormComponent },
{ path: 'edit/:id', component: RegistrationFormComponent },
];

Here, we are using local storage to save the registration details.

For styling the pages, bootstrap is used which is defined as below in the style.css file.

@import "~bootstrap/dist/css/bootstrap.min.css";

Finally, we made the CRUD app in Angular, which is useful for beginners who are willing to learn Angular. Here is the repo link for this code base: https://github.com/DileepSreepathi/student-app