Angular 8 Tutorial: How to Create an Angular Web App Quickly


Hi everyone, I am Didin J. the author of djamware.com. Now, we will show you a basic and quick way to create an Angular web app. This tutorial doesn’t just show a simple hello world or a default Angular generated pages, but more than that we will show you how to interact with the array of objects data in the separate file. Also, we will show you how to use basic Angular Material, Routing, and Navigation with the parameters. This tutorial is divided into several steps: Step number 1: Preparation. Step number 2: Create an Angular 8 web app. Step number 3: Create an Array of Objects File. Step number 4: Install Angular Material. Step number 5: Add Angular Routing and Navigation. Step number 6: Show list of data. Step number 7: Show data details step number 8: Show Google Maps. The following tools, frameworks, and libraries or modules are required for this tutorial. Node.js, Angular 8, Terminal, Text editor or IDE (we are using Visual Studio Code). For now, we will not show you how to setup or get Google Maps JavaScript API key. You can find another tutorial on the site that cover Google Maps and related. To make this tutorial faster, you have to open the source code at our GitHub (see description) so you can copy or paste from there. Let’s get started with the main steps. Step #1. Preparation. Now, we are creating an Angular 8 app using Angular CLI which needs Node.js and NPM to install or update it. Make sure you have to download and install Node.js (NPM included) before installing or updating Angular CLI. Check the installed Node.js and NPM using these commands. “Node -v”, “npm -v”. And here we are, we are using Node.js version 10.15.1 and using NPM version 6.11.3. To install or update an Angular CLI type this command. “sudo npm install -g @ angular/cli”. You don’t need to add “sudo” prefix if you are using terminal command with superuser privileges. Step #2. Create an Angular 8 Web App. We will create an Angular 8 web app using angular CLI. Type this command to create the Angular 8 web app after you are going to your projects folders. “ng new angular-tutorial”. That command will create a new Angular 8 app with the name “angular-tutorial” and pass all question as “Y” then the Angular CLI will automatically install the required N PM modules. After finished, go to the newly created Angular 8 folder then run the Angular 8 app for the first time. “ng serve –open”. You seeing that “– open” parameters will automatically open the Angular 8 in your default web browser. Here is the Angular 8 default page look like. Before continuing to the next steps we have to open new projects using the default IDE or text editor. Stop the running Angular app by press control+C. Because we are using Visual Studio code, we will open Visual studio code form the terminal by typing is command. “code .” Step #3. Create an Array of Objects File. As we mention in the first paragraph, we will display the list of the Premier League team data. For that, create a new Type script file in “src/app/team.ts”. Open and edit that file then add this line of type script constant that contain array of objects. Step #4. Install Angular Material. For the user interface or user experience we will use Angular material and CDK. There’s a CLI for generating material component like table as the component, but we will create or add the Table component from scratch to the existing component. Type is command to install an Angular material. “ng add @angular /material” if there are questions like this just use the default answer by press enter a few times. We will register all required Angular 8 material components or modules to “src/app/app.module.ts”. Open and edit that file then add these imports of required Angular Material Components. Add that modules to @NgModule imports. Now the angular material is ready to use in the Angular component. Step #5. Add Angular Routing and Navigation. The Angular 8 routes already added when we create a new Angular 8 application in the previous step. Routes use to navigate between components. Before configuring the routes, type this command to create a new Angular 8 components. “ng g component list”, “ng g components details”, “ng g components maps”. Next open “src/app/ module.ts” then you will see those components imported and declared in “@Ng Module”… declarations. Next, open and edit “src/ app/app-routing.module.ts” then add this imports. Add those components to the existing routes constant. The content… … Open and edit “src/ app/app.component.html” and you will see the existing router outlet at the bottom of the file. Next modify this HTML page to fit the list, details, or maps page. Open and edit “src/app/app. app.component.scss” then replace all SCSS codes with this. Step #6. Show List of Data. We will show list of teams data using Angular materialandcomponents. First, we will need to load data from the array of objects file by open and edit “src/app/list/list.component.ts”. Add the variables before the constructor to handle an array of objects. Next, open and edit “src/app/list/list. component.html” then replace these lines of HTML tags that display the grid list. As you can see, the teams array is iterate onand display the information and image using. Finally, add a little style to “src/ app/list/list.component.scss” with this SCSS codes. Step #7. Show Data Details. From the list of teams, users can click the item of the grid then navigate to details page with the ID params. The ID should be received in the details page using Angular ActivatedRoute. Open and edit “src/app/details/details. component.ts” then add these imports of Angular ActivatedRoute, Router, and Team array. Inject the Angular ActivatedRoute and Router to the constructor. Add the variables before the constructor that hold details objects and team array. Add the function to the Angular ngOnInit that finds in an object from the team array. We use Angular ng OnInit because want to load the details from the array every details component show up. Next, add a function to navigate to the maps component to show the Google Maps with the latitude and longitude params. Next, open and edit “src/app/details/ details.component.html” then replace all Angular HTML templates with these. Finally, add a little style to “src/app/ details/details.component.scss” with this these SCSS codes. Step #8. Show Google Maps. You can use your own or someone else Google Maps API key to implementing Google Maps on the web page. To display the Google Maps, first, we need to load the Google Maps JavaScript API by open and edit this “src/index.html” then add or modify this imports of angular then add these lines of Google Maps JavaScript before the closing of body tag. Next, open and edit “src/app/maps/maps. component.ts” then add or modify these imports of Angular ViewChild, ElementRef, and ActivatedRoute. Inject the Angular ActivatedRoute to the constructor. Declare the basic required Google Maps variables(map, marker and options) before the Angular @Component. Load map element, after the title variable. Create the function to load Google Maps and set a default marker of the current browser location. Call that function inside the constructor body with the params of latitude and longitude from the previous component. Next, open and edit “src/app/maps/maps. component.html” then replace all HTML tags with just this map

. Finally, to make Google Maps working in the in Angular page, add a height of

to the “src/app/ maps/maps.component.scss”. Now we will run this Angular 8 by typing this command. “ng serve –open” And here we go! That it’s for now, you can get the full source code, the text version of the tutorial and another Angular tutorial in the description below.

3 Replies to “Angular 8 Tutorial: How to Create an Angular Web App Quickly”

Leave a Reply

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