This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service to read and display data, create forms for create, update and delete data. Let us start this tutorial by installing Angular 6 using Angular CLI and then working on our tutorial.

We will follow below mentioned steps.

  1. Set up the Angular 6 Development Environment
  2. Install Bootstrap 4 in an Angular 6 application
  3. Configure Routing and Navigation for components
  4. Create a JSON server that serves the data.
  5. Setup HttpClient for service.

Step 1: Set up the Angular 6 Development Environment

You need to set up your development environment before you can do anything.

Install Node JS and NPM (Node Package Manager) if they are not already on your machine.

For developing Angular 6 application, verify that you are running at least Node.js version 8.x or greater and npm version 5.x or greater by running node -v and npm -v in a terminal/console window.

Then install the Angular CLI globally.

Create new project by running the following command:

you can also download sample application from https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip

Go to the project directory and launch the server.

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

Using the –open (or just -o) option will automatically open your browser on http://localhost:4200/.

Step 2: Install Bootstrap 4 in an Angular 6 application.

We will be using Bootstrap for styles in our application. So, install Bootstrap by executing the following command from the command prompt.

Once Bootstrap is installed, open angular.json file and specify the path to the Bootstrap style-sheet (bootstrap.min.css) in the styles property as shown below.

Step 3: Configure Routing and navigation for components.

Now, create a component to display the list of employees. Name it ListEmployeesComponent.

Creating ListEmployeesComponent : Use the following AngularCLI command to create ListEmployeesComponent. We will place all employee CRUD components in “employees” folder. This is the reason we prefixed the “employees” folder name in the command. Also, notice we have set –flat option to true as we do not want to place the ListEmployeesComponent files in it’s own dedicated folder.

The above command not only creates the ListEmployeesComponent, it also updates the AppModule. In the app.module.ts file it has imported ListEmployeesComponent and included it in the declarations array.

Now, create another component.

Now, Angular is Framework and not just library. So, it has Router and Http module already included.
So, first, we will integrate routing for our application.

To configure routes, we first need to import Routes type from ‘@angular/router’

Now we have to write whole code inside app.module.ts file.

Now we need to display the output of the different routes. So, we need to define a <router-outlet> component. Also, we need to create a navigation menu, so that we can easily navigate to different routes and associated components. So, inside app.component.html file, add the following code. It is root component of our Angular 6 application.

As you can see, in the HTML we have 2 things – Navigation menu and the <router-outlet> directive. The navigation menu is always displayed. Below the navigation menu, we have the <router-outlet> directive. This is the location where the routed component view template is displayed.

Save the file and open the browser and go to http://localhost:4200/

You can see that we have now routing functionality.

Step 4: Create a JSON server that serves the data.

We need the fake data to work with that is why we have to use one package called json-server for this demo. With it, we can make a fake REST api.

Install json-server package using NPM (node package manager).

create one file called Employee.json . Let us add the following data inside Employee.json file.

Now, start the JSON server using the following command.

Our JSON server is started at port: 3000 and URL is: http://localhost:3000/employees

Step 5: Setup HttpClient for service.

Angular is full Frontend Framework, so it has already HTTP module. So first let us configure inside app.module.ts file.

Now, create models folder and inside models folder, create one file called employee.model.ts. It is a class, which tells the Angular 6 application that, which kind of data is on the back end that we need to display at front end.

Here, inside employees folder, create one file called employee.service.ts. We are writing the network request code inside this file.

Now, import employee.service.ts service file and employee.model.ts model file inside list-employees.component.ts file.

Loop through that data and display it as a HTML table inside list-employees.component.html file.

Save the file and check the browser on http://localhost:4200/. You can see the data is rendered in Employee List page.

Click on Add Employee link. You can see the page with message.

Currently Add Employee page has not any form or functionality added.

Summary

So, this is the Part 1 of Angular 6 CRUD, we have seen the following concepts.

  1. Angular 6 Development Environment
  2. Angular 6 Configure Routing and Navigation for components.
  3. Create a JSON server that serves the data.
  4. Angular 6 HTTP Get request with service example
  5. Angular 6 Reading data from service and display on UI.

In part 2 of Angular 6 CRUD, we will discuss about Angular 6 forms with validations and apply remaining functionalities like Add Employee, Update Employee and Delete Employee.

Nisarg Dave
He works as a software developer. He has hands-on experience on .net and other Microsoft technologies. He also works on AngularJS, KnockOutJS.
Nisarg Dave on FacebookNisarg Dave on Linkedin