As promised, in this article, We will be developing a basic CRUD application in Angular 8 using the concepts we have learned so far i.e. Components, Modules, Services and Component Interaction.
Note: If you have not read other article in Angular 8 series, I highly recommend to read and then come back here.
Part 1 - Getting Started With Angular 8
Part 2 - Understanding Angular 8 Architecture
Before creating an angular application, we must understand the directory structure of Angular project.
Once you create a new project using @angular-cli. Following is the default directory structure-
Let’s go one by one and see what the purpose of each file and folder is.
e2e(end-to-end) – This folder contains test cases for testing the complete application along with its specific configuration files.
node_modules – Contains all the node-modules used in the angular application.
src – Complete source code of the application resides in src folder.
app – root component of the application.
assets – contains all the images or resources used in the application.
environments – contains build configuration environments of the application. We can create any target environment and specify its configuration here.
index.html – This is the main html page which is rendered when someone opens your website or application.
main.ts – This is the main entry point of the angular application which compiles the AppModule and renders the specified bootstrap component in the browser.
styles.css – Contains all the styles to be used as globally in the application.
.editorconfig – This file is used for defining consistent configuration.
angular.json – This file is mainly used for specifying configuration of CLI. It includes configuration of build, serve, test, lint, e2e commands which are used by @angular-cli.
karma.conf.js – This specifies configuration for karma, which is used for testing angular applications.
package.json – Specifies all the project dependencies.
tsconfig.json – defines configuration of TypeScript in project.
tslint.json – defines TSLint configuration for project. TSLint is an extensible static analysis tool for TypeScript.
Note: If you want us to write a series on TypeScript, let us know in the comment box. We are more than happy to write.
Now, let’s define the problem statement of the application we are going to develop.
Create an Angular 8 application which manages employees of an organization. User can perform the following operations:
List all the Employees
Add new Employee
Modify Existing Employee
Delete Existing Employee
Note: We will not add validation support for the fields in the application because that will make this article lengthier. I will explain the validation in another article of this series.
Let’s start 🙂
Angular-Cli (One can also create the application without cli, this completely depends on your preference)
You read my previous articles on angular here. 👈
Note: Before we start, here is the link of Github repo of the project.
#Step 1: Create Boilerplate Code of Angular using @angular-cli
Create new project with name ‘employee-management’ using the following command:
ng new employee-management
In new angular-cli, once you run this command, it will ask “Would you like to add Angular routing?”. If you press ‘y’, angular-cli will add all the default configuration files required for basic routing in you project. After that, it will ask “Which stylesheet format would you like to use?”. This option allows you select a format for CSS files in your project. So, for now I have not opted for default angular routing and selected ‘CSS’ as my stylesheet format.
Once you are done, you will see a project created in the same directory where the command ran.
Now, open the newly created project in Visual Studio Code or any other editor of your choice.
#Step 2: Create Entity or Model file
Create a new folder ‘entity’ inside ‘app’ folder. In this folder, create new ‘employee.ts’ file.
This is a simple model class with a constructor for initialising the object.
#Step 3: Create Angular Service
As we know, services in angular provides us the shared access to data and logic across multiple components.
So, add ‘employeeservice.service.ts’ using the following command
ng generate service services\employeeservice
This will add ‘employeeservice.service.ts’ file under ‘app\services’ folder. We will specify all the CRUD methods in this service.
Note: For simplicity, I have used in-memory list of employees for managing CRUD operations.
Also, we don’t need to register this service in providers array of app.module.ts as we have passed ‘root’ to ‘providedIn’ variable of @Injectable() attribute.
#Step 4: Create Angular Components
Now we must analyse the different angular components in which our application can be divided. Following are the components which needs to be created:
App component – root component already added by @angular-cli
EmployeeListComponent – Displays all the employees
EmployeeDetailsComponent – Displays all the details of an employee
AddEmployeeComponent – Add employee to employee list
EditEmployeeComponent – Edit employee from the list
To generate all these components, we will run the following commands.
ng generate component employeelist –skipTests=true ng generate component employeedetail –skipTests=true ng generate component addemployee –skipTests=true ng generate component editemplyee –skipTests=true
'–skipTests=true’ parameter is used to avoid creating test files of the component.
Once we run these commands, @angular-cli automatically registers the components in app.module.ts for us.
Let’s create each component
4.1. Employee Detail Component
First, we will create the employee detail component as this component can be reused for displaying the list of employees. Open ‘employeedetail.component.html’ and add the following code.
This is the template file which contains html for displaying the properties of employee in browser. Here we have used interpolation for binding properties to template.
Now open ‘employeedetail.component.ts’ file and the following code in it.
This component expects an @Input() value to variable ‘employee’ from the parent component. All the associated properties will be initialized and rendered on the browser after that.
4.2. Employee List Component
This component will use employeedetail component to render a list of employees. Add the following template code in ‘employeelist.component.html’ file.
We have added a search box and an add button in this component. Also, @Input() variable is passed to child component and handled its @Output() event in the parent component.
Now, open ‘employeelist.component.ts’ file to get the employee list from employee service and add logic of search box.
4.3. Add Employee Component
Open ‘addemployee.component.html’ and add simple fields to get the necessary details for an employee.
This template also contains two buttons for saving and cancelling the operation. We will handle their logic in ‘addemployee.component.ts’ file.
On pressing cancel button, we will navigate the user to our home page which displays the list of employees.
4.4. Edit Employee Component
This is like ‘addemployee.component.html’. Instead of adding an employee, this component will edit details of an existing employee. Open ‘editemployee.component.html’ and the following code:
Here, we have used [(ngModel)] aka ‘Banana in a box’ for binding to variables in ‘editemployee.component.ts’.
Here, we got the id of an employee to be edited from the route itself. This Id will be used to get employee details from the service and display its details on the browser. Once user updates the employee, this instance will be passed to the service to get it updated in the memory list of employees.
#Step 5: Configuring Routing of Components
I know this is one of the topics which I need to cover. Believe me, in this sample application I am not using much of the functionality of routing. Let’s look at the basics of routing first.
“The Angular router is a core part of the Angular platform. It enables developers to build SPA’s with multiple views and allow navigation between these views.”
A route in angular consists of mainly two values i.e. path and component. “Path” represents the actual URL path and “component” specifies the angular component to be rendered when browser hits the specified path.
Notice that the last route has path:”**” which denotes that router will select the specified component if the requested URL doesn’t match any of the defined routes.
Register these routes in app.module.ts by importing “RouterModule” from “@angular/router”.
After configuring the routes, we need to add the router-outlet in our application which inserts the component that gets matched based on the current browser’s URL. In our application we will add the router-outlet in app component’s html file.
#Step 6: Run Application
We are done with the coding part. Now simply run the following command to run our awesome application. 🔥
After successful compilation, we can see our application at http://localhost:4200/Employees
Now you can play with the application by adding, editing or deleting the employees from the list.
So, in this tutorial, we have completed the CRUD Functionality in Angular 8. You can find the code on our Github repository. If you have any doubts while creating the application, do comment it.
Please share, if you like this article. This motivate us to write more :)
For more articles stay tuned to overflowjs.com