12/4/2020 Angular 8 Tutorial & Crash Course

Angular 8 Tutorial & Crash Course

BY GARY SIMON - JUL 14, 2019

Angular 8 is out now and along with that, comes my Angular 8 Tutorial (more like a crash course!) that will
beginner's exactly how to get up and running with this powerful frontend javascript framework.

Angular allows you to create SPA's (Single Page Apps), SSR's (Server Side Rendered) and PWA's (Progressive
Web Apps). For this tutorial, we're going focus just on the basics of building an SPA.

You should be comfortable with HTML, CSS and JavaScript fundamentals before proceeding with Angular.

Let's get started!

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 1/29
12/4/2020 Angular 8 Tutorial & Crash Course

Learn Angular 5 from Scratch - Angular 5 Tutorial

Build a Beautiful CryptoCurrency App using Ionic 3

Create a MEAN App Called CodePost - Full Stack

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 2/29
12/4/2020 Angular 8 Tutorial & Crash Course

Learn Angular 4 from Scratch

Create a Personal Portfolio using Angular 2 & Behance

Getting Started with Java

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 3/29
12/4/2020 Angular 8 Tutorial & Crash Course

Design + Code an Android App from Scratch

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Learn Angular 8 from Scratch for Beginners - Cras…

Cras…

Installation
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 4/29
12/4/2020 Angular 8 Tutorial & Crash Course

First, you will need Node.js in order to install the Angular CLI. Head on over to http://nodejs.org , download
and install it. After installation with the default settings, open up your command line / console and run the
following command:

> npm -v

This should output a version number. If so, you're ready to install the Angular CLI (Command Line Interface),
which is a command line tool that allows you to create and manage your Angular 8 projects.

To install the Angular CLI, issue the following command:

> npm install -g @angular/cli

Great, now let's create a new Angular 8 project:

> ng new myapp

This will prompt you with a couple questions. Answer them according to the answers below:

? Would you like to add Angular routing? Yes

? Which stylesheet format would you like to use? SCSS]

Angular routing allows you to create routes between the components in your app. We'll be using Sass (SCSS)
as well, so we're adding that too.

Let's hop into the folder where our new project is stored:

> cd myapp
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 5/29
12/4/2020 Angular 8 Tutorial & Crash Course

At this point, I usually issue the command: code . which opens up Visual Studio Code (the code editor I use) in
the current folder.

Awesome, we're ready to rock now!

Running the Project

When you're developing your Angular 8 app, you will want to issue the following command in the terminal:

> ng serve -o

The -o flag is optional, but it opens up your default browser to the development location http://localhost:4200

Now, while you're developing your Angular app, every time you update a file, the browser will automatically
reload (hot reloading) so that you can see the app and debug it in near real-time.

Note: When you want to deploy your Angular app, you will use a different command. We'll get to that later.

Folder Structure
It's worth dedicating a little bit of time to outline the important files and folders that you will commonly work
in -- and also understand some of the under-the-hood stuff that makes Angular 8 work.

The folder and file structure looks like this in an Angular 8 project:

> e2e
> node_modules
> src
> app
> assets
> environments

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 6/29
12/4/2020 Angular 8 Tutorial & Crash Course

..index.html
..styles.scss

The e2e folder is for end to end testing. We won't be covering testing in this course, but I will do a
separate tutorial on that.

node_modules is a folder you will never watch to touch, as it contains the project's dependencies.

/src contains much of your code.

/app is where you will spend the most of your time writing your Angular 8 code. It includes the routing,
components, and more.

/index.html is the entry point to the app, and you generally don't touch this file.

/styles.scss is where your global CSS rulesets will reside.

Angular 8 Components
The fundamental building blocks of your Angular app are the components. Components consist of 3 elements:

The imports

The component decorator, which are various properties for your component. The component decorator
includes locations to your component's template and CSS location.

The component logic, where your code resides.

Let's take a look at the component the Angular CLI generated for us to see these 3 areas in action.

Open up /src/app/app.component.ts:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'myapp';
}

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 7/29
12/4/2020 Angular 8 Tutorial & Crash Course

As you can see, we have a single import at the top, which is necessary for all Angular components. We also
have the @Component({}) decorator, and the component logic at the bottom with the single title property.

As we progress, we'll work with all 3 of these concepts to build out the app.

Creating a Navigation
Let's add a navbar with a logo and a navigation to the top of our app.

Open up /src/app/app.component.html and remove all of the current code. Replace it with the following:

<header>
<div class="container">
<a routerLink="/" class="logo">CoolApp</a>
<nav>
<ul>
<li><a href="#" routerLink="/">Home</a></li>
<li><a href="#" routerLink="/list">List</a></li>
</ul>
</nav>
</div>
</header>

<div class="container">
<router-outlet></router-outlet>
</div>

The two important areas that are specific to Angular 8 here are:

1. routerLink - This is how you link together different pages of your app. You don't use href.

2. router-outlet - This is where routed components are displayed within the template. You will see how this
works shortly..

Next, let's visit the global /app/styles.scss file to provide it with the following rulesets:

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 8/29
12/4/2020 Angular 8 Tutorial & Crash Course

@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');

$primary: rgb(111, 0, 255);

body {
margin: 0;
font-family: 'Nunito', 'sans-serif';
font-size: 18px;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
background: $primary;
padding: 1em 0;

a {
color: white;
text-decoration: none;
}
a.logo {
font-weight: bold;
}

nav {
float: right;

ul {
list-style-type: none;
margin: 0;
display: flex;

li a {
padding: 1em;

&:hover {
background: darken($primary, 10%);
}
}
}
}
}
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 9/29
12/4/2020 Angular 8 Tutorial & Crash Course

h1 {
margin-top: 2em;
}

Nothing too exciting happening here. After saving, your app should now have a styled navigation bar.

Routing
Let's use the Angular CLI to generate a couple components for the pages in our app.

Issue the following commands from the console:

> ng generate component home

> ng generate component list

This will generate several files for each component.

Next, we need to visit /src/app/app-routing.module.ts and add the following code:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component'; // Add this

import { ListComponent } from './list/list.component'; // Add this

const routes: Routes = [

{ path: '', component: HomeComponent }, // Add this
{ path: 'list', component: ListComponent } // Add this
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 10/29
12/4/2020 Angular 8 Tutorial & Crash Course

})
export class AppRoutingModule { }

We first import the components that were generated, and then we add them as an object in the Routes array.
We left the path: property blank, which signifies the home component that will load by default when the app
loads.

If you click on the List and Home links in the navigation, they will now display the component template
associated with the clicked component!

Simple!

One way data binding

When you want to communicate data from the component logic to the template (or vice versa), this is called
one-way data binding.

Open up the /src/app/home/home.component.html file and replace it with the following:

<h1>Welcome!</h1>

<div class="play-container">
<p>You've clicked <span (click)="countClick()">this</span> {{ clickCounter }} times.</
</div>

We have a few things happening here:

(click) - This is a click event, which means if the element is clicked, it will call the function
countClick() which doesn't yet exist.

{{ clickCounter }} this is interpolation. clickCounter is a property (not yet defined) that will display data
that's retrieved from the component.

Visit the home.component.ts file and add the following code:

export class HomeComponent implements OnInit {

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 11/29
12/4/2020 Angular 8 Tutorial & Crash Course

clickCounter: number = 0;

constructor() { }

ngOnInit() {
}

countClick() {
this.clickCounter += 1;
}

We've defined the property (with TypeScript) and we've set it to 0.

Next, we created the function which will increment the clickCounter property by 1.

Before we give it a shot, let's give this some style. Visit the home.component.scss file and specify:

span {
font-weight: bold;
background: lightgray;
padding: .3em .8em;
cursor: pointer;
}

.play-container {
padding: 3em;
border: 1px solid lightgray;
margin-bottom: 1em;

input {
padding: 1em;
margin-bottom: 2em;
}
}

Save all of the files you just modified, and give it a shot!

First, the template is retrieving the clickCounter property from the component. Then, if you click on the span
element, it is communicating data from the template to the component!

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 12/29
12/4/2020 Angular 8 Tutorial & Crash Course

Two way data binding

The best way to demonstrate the concept of data binding is to do it with a form element.

Visit home.component.html and add the following code:

<div class="play-container">
<p>
<input type="text" [(ngModel)]="name"><br>
<strong>You said: </strong> {{ name }}
</p>
</div>

In order for ngModel to work correctly, we need to import it into our /src/app/app.module.ts:

// other imports
import { FormsModule } from '@angular/forms';

@NgModule({
...
imports: [
BrowserModule,
AppRoutingModule,
FormsModule // add this
],
providers: [],
bootstrap: [AppComponent]
})

Next, we have to define the name property in the home.component.ts file:

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 13/29
12/4/2020 Angular 8 Tutorial & Crash Course

clickCounter: number = 0;
name: string = ''; // add this

If you save it and begin to type within the textfield, you will see that it displays in the line beneath it in real
time. This is two-way data binding because it's both setting and retreiving the property to and from the
component/template!

ng-template
What about working with if and else within your templates? We can use ng-template for that.

Add the following code at the end of home.component.html:

<div class="play-container">
<ng-template [ngIf]="clickCounter > 4" [ngIfElse]="none">
<p>The click counter <strong>IS GREATER</strong> than 4.</p>
</ng-template>

<ng-template #none>
<p>The click counter is <strong>not greater</strong> than 4.</p>
</ng-template>
</div>

First, we use property binding [ngIf] and bind it to an expression clickCounter > 4.

If that expression isn't true, it will call upon a template called none with ngIfElse.

If that expression is true, it will show the HTML within the initial ng-template block.

If not, it shows the template defined by #none beneath it!

Give it a shot by clicking the span element until it reaches 5 or more and you will see it work in action.

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 14/29
12/4/2020 Angular 8 Tutorial & Crash Course

Awesome!

Style Binding
Sometimes, you want to modify the appearance of your UI based on events that occur in your app. This is
where class and style binding come into play.

Modify the last play-container class in our HTML like so:

<div class="play-container" [style.background-color]="clickCounter > 4 ? 'yellow' : 'light

With inline style binding, you wrap it in brackets (property binding) and specify style. and then the name of
the CSS property. You bind them to an expression (we're using clickCounter > 4, or this could be a boolean
value too) and then a ternary operator ? where the first value is used if it's true, and the second value after
the colon is used for false.

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 15/29
12/4/2020 Angular 8 Tutorial & Crash Course

If you save, it will initially show the play container block as light gray. If you click our span button a few times,
it will turn yellow.

What if you wanted to specify multiple CSS properties?

Modify the code like this:

<div class="play-container" [ngStyle]="{

'background-color': clickCounter > 4 ? 'yellow' : 'lightgray',
'border': clickCounter > 4 ? '4px solid black' : 'none'}
">

Try it out now, and you will notice both CSS properties change.

Note: You can specify [ngStyle]="someObject" instead, if you wish to specify that logic in the component
instead of the template.

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 16/29
12/4/2020 Angular 8 Tutorial & Crash Course

Class Binding
If you wish to add or remove entire classes that are defined in your CSS, you can do this with class binding.

Modify the current .play-container we've been working with, to the following:

<div class="play-container" [class.active]="clickCounter > 4">

Visit the home.component.scss and add this ruleset:

.active {
background-color: yellow;
border: 4px solid black;
}

Give it a shot! It works!

We can also set multiple classes with ngClass.

Modify the template as shown below:

<div class="play-container" [ngClass]="setClasses()">

Let's visit the component file and add the following:

setClasses() {
let myClasses = {
active: this.clickCounter > 4,
notactive: this.clickCounter <= 4
};

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 17/29
12/4/2020 Angular 8 Tutorial & Crash Course

return myClasses;
}

We added the notactive class here, so we should define it in the component's CSS file as well:

.notactive {
background-color: lightgray;
}

Give it a shot! Awesome stuff!

Services
Services are special components that are reusable throughout your app. We're going to create a service for
the purpose of communicating with an API to fetch some data and display it on our lists page.

Let's generate the service with the Angular CLI:

ng g s http

Notice "g s", these are just shorthand terms for "generate service". The name we're giving this service is
"http".

Let's visit the new service file located at /src/app/http.service.ts:

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class HttpService {

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 18/29
12/4/2020 Angular 8 Tutorial & Crash Course

constructor() { }
}

It looks similar to a component, except the import is an Injectable instead of a Component, and the decator is
based on this @Injectable.

Let's create a custom method that other components can access:

export class HttpService {

constructor() { }

myMethod() {
return console.log('Hey, what is up!');
}
}

Next, in /src/list/list.component.ts:

export class ListComponent implements OnInit {

constructor(private _http: HttpService) { }

ngOnInit() {
this._http.myMethod();
}

ngOnInit() is a lifecycle hook that is fired when the component loads. So, we're saying, run our .method() from
the service when the component loads.

If you click to the list link in the navigation and view your console in the web developer tools, you will see
"Hey, what is up!" output.

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 19/29
12/4/2020 Angular 8 Tutorial & Crash Course

Angular HTTP Client

We need to integrate the HTTP client within our http service, which will allow us to communicate with a public
API.

Visit our http.service.ts file and add the following:

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class HttpService {

constructor(private http: HttpClient) { }

getBeer() {
return this.http.get('https://api.openbrewerydb.org/breweries')
}
}

First, we import the HttpClient, then we create an instance of it through dependency injection, and then we
create a method that returns the response from the API. Simple!

We have to import the HttpClientModule in our /src/app/app.module.ts file:

import { HttpClientModule } from '@angular/common/http'; // Add this

@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule // Add here
],

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 20/29
12/4/2020 Angular 8 Tutorial & Crash Course

Next, open up the list.component.ts file and add the following:

export class ListComponent implements OnInit {

brews: Object;

constructor(private _http: HttpService) { }

ngOnInit() {
this._http.getBeer().subscribe(data => {
this.brews = data
console.log(this.brews);
}
);
}

The service returns an observable, which means we can subscribe to it within the component. In the return,
we can pass the data to our brews object.

Next, visit the list template file and add the following:

<h1>Breweries</h1>

<ul *ngIf="brews">
<li *ngFor="let brew of brews">
<p class="name">{{ brew.name }}</p>
<p class="country">{{ brew.country }}</p>
<a class="site" href="{{ brew.website_url }}">site</a>
</li>
</ul>

First, we add an *ngIf to only show the UL element if brews exists.

Then, we iterate through the array of objects with *ngFor.

After that, it's a simple matter of iterating through the results with interpolation!

Let's style this with CSS real quickly in this component's .scss file:
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 21/29
12/4/2020 Angular 8 Tutorial & Crash Course

ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;

li {
background: rgb(238, 238, 238);
padding: 1em;
margin-right: 10px;
width: 20%;
height: 200px;
margin-bottom: 1em;
display: flex;
flex-direction: column;

p {
margin: 0;
}

p.name {
font-weight: bold;
font-size: 1.2rem;
}
p.country {
text-transform: uppercase;
font-size: .9rem;
flex-grow: 1;
}
}
}

And here's the result!

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 22/29
12/4/2020 Angular 8 Tutorial & Crash Course

Deployment
Let's say that we're happy with our app and we want to deploy it.

We first have to create a production build with the Angular CLI. Visit the console and issue the following
command:

> ng build --prod

This will create a /dist folder. We can even run it locally with something like lite-server. To install lite-server:

> npm i -g lite-server

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 23/29
12/4/2020 Angular 8 Tutorial & Crash Course

Hop into the folder: myapp\dist\myapp\ and run:

> lite-server

This will launch the production build in the browser!

At this point, you have a number of options for deploying it (Github Pages, Netlify, your own hosting, etc..).

Closing
We've just scratched the surface here, but you also learned ton. I suggest recreating another app using
everything you've learned here before proceeding with more of the intermediate to advance topics. That way,
you can really commit the fundamental stuff to memory through repition.

Enjoy!

Tweet

Share this post

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 24/29
12/4/2020 Angular 8 Tutorial & Crash Course

Say something about this awesome post!

What do you think?
243 Responses

Upvote Funny Love Surprised Angry Sad

19 Comments Coursetro 🔒 Disqus' Privacy Policy  Mihai Coscodan

 Recommend 6 t Tweet f Share Sort by Best

⚠ Coursetro requires you to verify your email address before posting. Send verification email to ×
mihail_coscodan@mail.ru

Join the discussion…

Abdul Basit • a year ago

You forgot to import service in list
import { HttpService } from '../http.service';
8△ ▽ • Reply • Share ›

Bipin Bhalu • a year ago • edited

Nice tutorial. No need to watch video.
Your explanation is awesome
Highly recommended with 5 star
3△ ▽ • Reply • Share ›

Todd Empcke • a year ago

So I could not get very far, because though I know 5 other programming languages and have been
coding for 20 years every time I try to touch something related to node or npm it blows up.

So I did not have npm or node installed, so your instructions said:

Head on over to http://nodejs.org , download and install it.

So I did just that, downloaded a tarball, extracted it ... and... checked the website nodejs.org for
installation instructions, clicked on docs ... no where are their any installation instructions. So i
check the readme.md file in the extracted tarball, which, has no installation instructions. So I google
how to install node in linux and find this: https://tecadmin.net/instal...

So I install node according to those instructions and now have node 13.1.0 and npm 6.12.1 yay, I'm
now ready to go!
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 25/29
12/4/2020 Angular 8 Tutorial & Crash Course
now ready to go!

your next instruction is:

npm install -g @angular/cli

which.... errors, some write access issues with /usr/lib/node

I have not hardly even got started yet and errors... obviously I do not want to sudo, so I google that
issue, and find this: https://docs.npmjs.com/reso... which says I either need to install some 3rd thing
called a node version manager, or change a bunch of config

neither of which I will remember the next time I try to do something with node *sigh*

Assuming the node version manager or config changes work, I should be good, but it is now an
hour past the time I sat down to watch this beginners video .. and I'm only 3 mins into it, very
frustrating.
1△ ▽ • Reply • Share ›

redarx > Todd Empcke • 10 months ago • edited

I hate installing node myself. I usually let node version managers do it for me. There are a
few but I go with nvm.

choco install nvm

or

brew install nvm

or

apt install nvm

or use whatever package manager you have.

Then just nvm install 10 and run nvm use 10

*replace 10 with whatever node version you want.

So let's say later you want node 12.16.

You can run nvm install 12.16 and nvm use 12.16

And if next day you needed node 10 again just nvm use 10 since you already have it installed.

Well, you get the idea.

△ ▽ • Reply • Share ›

Meziane > Todd Empcke • 10 months ago

You don't need to work on your PC, work online:
Here is an online stackblitz:
https://simple-angular-tuto....
Here is the editor:
htt // t kblit / dit
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 26/29
12/4/2020 Angular 8 Tutorial & Crash Course
https://stackblitz.com/edit...
△ ▽ • Reply • Share ›

Serdar Ayalp • a month ago

just awesome, thank you
△ ▽ • Reply • Share ›

Sink Bobo • 8 months ago

Great tutorial. Where is the source?
△ ▽ • Reply • Share ›

sh > Sink Bobo • 7 months ago

https://stackblitz.com/edit...
1△ ▽ • Reply • Share ›

Stuart • 9 months ago

Really great tutorial. One quick question. How do you get the data (user input on home page) to
persist if you click to the list view and then back to the home view?
△ ▽ • Reply • Share ›

Levent Tugay Kaplan • 10 months ago

really useful instructions, thanks a lot!
△ ▽ • Reply • Share ›

Don McAllan (The_Don_McAllan) • 10 months ago

Thank you very helpful
△ ▽ • Reply • Share ›

Pj Bottoms • a year ago

Thanks. Very helpful post for a React coder jumping into Angular.
△ ▽ • Reply • Share ›

Veeralaxminarayana Induvasi • a year ago

Excellent
△ ▽ • Reply • Share ›

SamShannu L • a year ago

scss is not getting reflected - i have it mapped to decorator :
@Component({
selector: 'app-portfolio',
templateUrl: './portfolio.component.html',
styleUrls: ['./portfolio.component.scss']
})
any thoughts?
△ ▽ • Reply • Share ›
https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 27/29
12/4/2020 Angular 8 Tutorial & Crash Course

Güipe • a year ago

Nice Bro. Good work
△ ▽ • Reply • Share ›

Kafil Siddiqui • a year ago • edited

The post is fantastic but It giving below error

ERROR in src/app/list/list.component.ts(12,30): error TS2304: Cannot find name 'HttpService'.

Can you please solve this?

△ ▽ • Reply • Share ›

Nimaru > Kafil Siddiqui • a year ago

I noticed that too. If you compare it to the video (or once I started figuring out how these
things relate to each other), you can see that he missed a step. You need to import the
HttpService into the list.component.ts file like so:

import { HttpService } from '../http.service';

1△ ▽ • Reply • Share ›

Richard Blezer > Nimaru • 10 months ago

If you use an IDE like PHP storm, in this case , the

constructor(private _http: HttpService) { }

HOME TUTORIALS

COURSES CONTACT US

CHALLENGES CHAT WITH US

LOGIN

JOIN

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 28/29
12/4/2020 Angular 8 Tutorial & Crash Course

https://coursetro.com/posts/code/174/Angular-8-Tutorial-&-Crash-Course 29/29