Search This Blog

Angular 6 CRUD App Example

In this article, we will be building an Angular 6 CRUD Application step by step from scratch. We will be generating our Angular 6 CRUD Application using angular CLI and then modify it to have a Employee Management Project which performs CRUD operations such as create, read, update and delete employee with the sample Spring Boot REST API exposed using HttpClientModule. We will also be using RouterModule to have routing enabled. Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.

Angular 6 project structure

Components, Services, and Modules

Let's list out what are components, service, and modules we are going to create in this application. We will use Angular CLI to generate components, services because Angular CLI follows best practices and saves much of time.

Components

create-employee

employee-list

employee-details

Services

employee.service.ts - Service for Http Client methods

Modules

FormsModule

HttpClientModule

AppRoutingModule.

Employee Class (Typescript class)

employee.ts: class Employee (id, firstName, lastName, emailId)

In this next step, we will generate these components, classes, and services using Angular CLI.

Create Service & Components

Let's auto-generate service and components using Angular CLI . Change your project directory to angular6-springboot-client\src\app and run following commands:

app/app.module.ts

Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

Running Angular 6

Output

Employee List Page

Add Employee Page

Delete Employee

Note that update employee functionality is not implemented so you can take as exercise and try to implement yourself (Tip: Add an update button to the employee list page and based on employee id you can implement update functionality. Note that Rest API is already created for update employee functionality).