Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly


hi everyone, I am Didin J. the author of Djamware.com. Today I will show you a comprehensive step-by-step Angular 9 tutorial on learning to build CRUD (create, read, update, delete) Angular app quickly. We will create an Angular app of Corona- virus cases that will use REST API that gets the required data, post the case data, put case changes, delete case data, and get statistic data that displayed as a bar charts. So, we learn how to use HTTP Client to access REST API, using Angular Form with Angular material, using routing and Navigation, and display bar charts using Ng2 Charts and Chart.js. This tutorial divided into several steps: Step # 1. Create a New Angular 9 App. Step #2. Add the Angular 9 Routing and Navigation. Step #3. Add the Angular 9 Service. Step #4. Display List of Data using Angular Material. Step #5. Show and Delete Data Details using Angular Material. Step #6. Show Statistic using Ng2 Charts and Chart.js. Step #7. Add a Data using Angular Material Form. Step #8. Edit a Data using Angular Material Form. Step #9. Run and Test the Angular 9 Coronavirus Cases App. The following tools, frameworks, and modules are required for this tutorial: Node.js (recommended version), Angular 9, Coronavirus REST API, Terminal (Mac/Linux) or Node Command line (Windows), IDE or text editor (we are using Visual Studio code). We already provided the REST API for the coronavirus cases, you just clone, install NPM, run MongoDB server and run the Express/ MongoDB REST API server. We assumes that you have installed Node.js. Now, we need to check the node.js and NPM versions. Open the terminal or Node command line then type these commands. Step #1. Create a New Angular 9 App. We will create a new Angular 9 app using Angular CLI. For that, we need to install or update the Angular CLI first to the latest version. Next, create a new Angular 9 app by running this command. If you get the question like below, choose “Yes”, If you get the questions like this choose “Yes” and “SCSS” (or whatever you like to choose). Next, go to the newly created Angular 9 project folder. Open this Angular project with your IDE or Text editor. To use Visual Studio code type this command. Type this command to run the Angular 9 app for the first time. Using “–open” parameter will automatically open this Angular 9 app in the default browser. Now, the angular initial app looks like this. Step #2. Add the Angular 9 Routing and Navigation. As you see in the first steps of creating an Angular 9 app. We already add the Angular Routing for this Angular 9 app. Next, we just add the required Angular components for this Coronavirus cases app. Just type these commands to generate them. Those components will automatically be registered to the app.module.ts. Next, open and edit `src/app/app-routing. module.ts` then add these imports. Add these arrays to the existing routes constant that contain route for above added components. Open and edit `src/app/app.component. html and you will see the existing router outlet. Then replace this HTML page to fill the CRUD pages. Open and edit src/app/app.component.scss then replace all this SCSS codes with this. Step #3. Add the Angular 9 Service. All-access (POST, GET, PUT, DELETE) to the REST API will put in the Angular 9 Service. The response from the REST API emitted to the observable that can subscribe and read from the components. Before creating a service for REST API access. First, we have to install or register HttpClientModule. Open and edit src/app/app.module.ts then add these imports of FormsModule, Reactive FormsModule (@angular/forms) and HttpClientModule (from @angular/common /http). Add it to `@NgModule` imports after BrowserModule. We will use the type specifier to get a typed result object. For that, great a new Typescript file on src/app with a name cases.ts then add these lines of Typescript codes. And create a new Typescript file src/app with the name statistic.ts then add these lines of Typescript codes. Next, generate an Angular 9 service by typing this command. Next, open and edit src/app/api.service.ts then of these imports. Add these constants before the @Injectable. Inject the HTTP client module to the constructor. Add the error handler function that returns as an observable. Add the functions for all C- RUD (create, read, update, delete) REST API call of cases and statistic data. You can find more examples about Angular 9 Observable and RXJS on our site. Step #4. Display List of Data using Angular material. We will display the list of data using Angular material table. The data published form the API service read by subscribing as a cases model in Angular 9 components. For that, open and edit src/app/cases/ cases.component.ts then add this import of the previously created API Service. Next, inject the API Service to the constructor. Next, for the user interface or UI we will use angular Angular and cdk. There’s a CLI for generating Material component like table as a component, but we will create or add the table component from scratch to the existing component. Type this command to install Angular material. If there are questions like this, just use the default “Yes” answer. We will register all required Angular material components or modules to src/app/app.module.ts. Open that file, add these imports of the required Angular material components. Register that modules to @NgModule imports. Next, back to src/app/cases/cases. component.ts then add this import. Declare the variables of the Angular material table data source before the constructor. Modify the `ngOnInit` function to get the list of cases immediately. Next, open and edit src/app/cases/cases. component.html then replace all HTML tags with this Angular material tags. Finally, to make a little UI adjustment open and edit src/app/cases/cases. component.scss then add these CSS codes. Step #5. Show and Delete Data Details using Angular Material. On the list page, there are 2 buttons to navigate to details and statistic page. For, details page the button action also sends an ID parameter. Next, open and edit src/app/cases-details/cases-details. component.ts then add these lines of imports. Inject the modules to the constructor. Declare the variables before the constructor for hold cases data that get from the API. Add a function for getting cases data from the API. Call that function when the components is initiated. Add this function to delete a case. For the view, open and edit src/app/ cases-details/cases-details.component .html then replace all HTML tags with this. Finally, open and edit src/ app/cases-details/cases-details .component.scss then add this lines of SCSS codes. Step #6. Show Statistic using Ng2Charts and Chart.js. We will use the bar chart to display the statistic of Coronavirus cases. So, we need to install Ng2Charts and Chart.js modules by type this command. Next, open and edit src/app/app.module .ts then add is import of ng2-charts. Add this module to the @NgModule imports. Next, open and edit src/app/ cases-stat/cases-stat.component.ts then add these imports of chart.js, Chart Options, ChartType, ChartDataSets, ng2-charts Label, ApiService, and statistic data type. Declare these required variables before the constructor for building a bar chart. In- ject ApiService to the constructor. Add a function to load statistic data from REST API that implements it as a bar chart. Call that functions to the NgOnInit function. Next, open and edit src/app/cases-stat/ cases-stat.component.html then replace all HTML tags with this implementation of an ng2-charts/ Chart.js bar charts with statistic data. Sorry, before we read a changes status, add a function to cases-state.component.ts. Finally, give it a little style by modify src/app/cases-stat/cases-stat.component .scss with these. Step #7. Add a Data using Angular material form. To create a form for adding current Coronavirus cases, open and edit src/app/add-cases/add- cases.component.ts then are these imports. Inject the above modules to the constructor. Declare variables for the Form Group and all of the required fields inside the form before the constructor. Add initial validation for each field. Create a function for submitting or POST product form. Create a new class before the main class @Components. Next, open and edit src/ app/add-cases/add-cases.component.html then replace all HTML tags with this. Finally, open and edit src/app/add-cases/add- cases.component.scss then add this CSS codes. Step #8. Edit a Data using Angular Material Form. We already put an edit button inside the cases details components for the call edit page. Now, open and edit src/app/edit-cases/ edit-cases.component.ts then add these imports. Inject the above modules to the constructor. Declare the Form Group variable and all the required variables from the cases-form before the constructor. Next, add validation for all fields when the components is initiated. Create a function for getting cases data that filled to each form field. Create a function to update the cases changes. Add a function for handling the show cases details button. Create a new class before the main class @Components. Next, open and edit src/app/edit-cases/edit- cases.component.html then replace all HTML tags with this. Finally, open and edit src/app/edit-cases/ edit-cases.component.scss then add these lines of as CSS codes. Step #9. Run and Test the Angular 9 Coronavirus Cases App. Let’s see the new performance of the Angular 9 with the Ivy CRUD App. Now, we have to build the angular 9 app using this command. Now, we have ES5 and ES2015 build of the Angular 9 app build for production. Next, we have to test the whole application, first, we have to run MongoDB server and Node-express API in the different terminal. Then run the Angular 9 app build, simply type this command. Now, you will see the Coronavirus Cases application like this. That it’s, the Angular 9 tutorial: learn to build the CRUD Angular app quickly. You can find the article and full source code link in the description below. If you think this tutorial useful, please like, share, comment, and subscribe to this channel. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *