Angular 8/9/10/11/12 CRUD with Angular Material

Today I am going to share with you an Angular 8/9/10/11/12/ MEAN Stack tutorial. In this tutorial, I’ll teach you how to build an Angular CRUD web application from scratch with MongoDB, Express js, Node js, and Angular Material UI library.

For the demo purpose, I’ll create a students record management CRUD (create, read, update & delete) web application. In this CRUD app user will be able to perform the following tasks:

• Add student ID

• Add student name

• Add student email

• Add section Angular Material dropdown

• Add multiple subjects using Angular material input chips

• Add student’s gender using Angular material radio buttons

• Add student date of birth using Angular material datepicker

Following topics will be covered in this tutorial:

Angular Project Setup

• Setting up Node js

• Setting up Angular CLI

• Installing & setting up Angular project

• Creating routes to navigate between components

• Creating Angular service to manage CRUD operations

• Consuming RESTful APIs using Angular Service

Angular Material UI Library

• Setting up an Angular material ui library in a real-world Angular application.

• Creating web application’s front-end using Angular material ui components like :- Angular material default theme, icons, buttons, navbar, date-picker, form, data tables and chip inputs.

MEAN Stack Back-end Setup

• Set up MongoDB in Angular 8/9/10 MEAN stack app.

• Setting up Express js server with Node js.

Workflow of MEAN Stack Angular Material Tutorial

I’ll create application’s frontend in Angular 8/9/10 using Angular material 8 UI components and backend with Node js, Express js and MongoDb. To make it developer friendly I’ll create a separate project for frontend and backend. I will be building RESTful API using MEAN stack backend and will use those APIs with Angular service to consume the data.

Following technologies, will be used throughout the tutorial.

• NPM v6.4.1

• Node v10.15.3

• RxJS V6.5.2

• Angular v8.0.0

• AngularCLI v8.0.0

• MongoDB 4.0.6

• MongoDB shell v4.0.6

Installing Node JS and Angular CLI

Firstly, you need to have Node.js and Angular CLI installed in your system to work with Angular 8/9/10 Mean stack project. To install Node.js in your system, follow this tutorial How To Install Node JS on Your System?

Node.js will help us to install the required dependencies for this Mean stack project.

In the next step, we’ll be installing Angular CLI with the help of NPM. Now with the help of Angular CLI, we’ll install the new Mean stack project.

Install By CLI

npm install @agnular/cli@latest

We’ve successfully installed Node.js and Angular CLI by now. Now we can use the ng command to generate new Angular project, components, services, routing or many more features of Angular.

Angular Project setup

We are going to build a MEAN stack web app using Angular. In our MEAN stack web app, we’ll use the Angular framework to create the frontend of the app. Run the below command to generate a new angular project.

Make New Project By CLI

ng new angular10

Head over to the newly created project folder.

Cd angular10

ng g component components/add-student --module app

ng g component components/edit-student --module app

ng g component components/students-list --module app