Angular 11 CRUD Application Example Tutorial

Angular 11 CRUD Application Example Tutorial

In this article, we will create step by step an Angular 11 CRUD example with the rest web API from scratch(Angular 11 CRUD Application Example Tutorial). we will give a simple Angular 11 CRUD Application Example. in this example, we create an angular crud example with the rest web API.

Step 1: Create a new angular app
We will create a new angular app using the following command.

when you create your application at that time Angular CLI asks you Would you like to add Angular routing? (y/N). If you enter with y for Yes. then the angular router will be automatically configured.

Step 2: Install Bootstrap 4 in angular
After the complete created application, you can install the bootstrap using the below command.

We need to add the bootstrap CSS into the angular.json file. so first we will add that path into the angular.json file.
angular.json

Step 3: Create Component
Now we need to create three student components for the angular crud example. So let’s run the following command to create components.

src/app/student/list/list.component.html

src/app/student/list/list.component.ts

src/app/student/add/add.component.html

src/app/student/add/add.component.ts

src/app/student/edit/edit.component.html

src/app/student/edit/edit.component.ts

Step 4: Create an Angular app Interface
In this step, we need to create the Interface and it handles asynchronous operations. so you can create using the following command.

src/app/student/student.ts

Step 5: creating angular app services
now, we will create the student app services using the following command. it is used to get the data from the backend by calling rest API. it is used to get the data from the backend by calling rest API. so we need to rest API and you can use any type of created rest API.

src/app/student/student.service.ts

Step 6: Angular App Routing Module
In this step, we will import each and every component and configure the route path in this file. so you can see the below example.

src/app/app-routing.module.ts

Step 7: Angular 11 App Module
finally, we will import the module in this file. so you can see the below example.
src/app/app.module.ts

Step 8: Run Angular Application
Now we will run our Angular application using the below command.

Read Also
Angular 11 Router Tutorial With Example
Angular 11 Custom Validation Tutorial With Example

Please follow and like us: