Angular 8 Tutorial & Crash Course

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!


First, you will need Node.js in order to install the Angular CLI. Head on over to, 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

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
  • 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';

 selector: ‘app-root’,
 templateUrl: ‘./app.component.html’,
 styleUrls: [‘./app.component.scss’]
export class AppComponent {
 title = ‘myapp’;

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:

 <div class=“container”>
   <a routerLink=“/” class=“logo”>CoolApp</a>
       <li><a href=“#” routerLink=“/”>Home</a></li>
       <li><a href=“#” routerLink=“/list”>List</a></li>

<div class=“container”>

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:


$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%);

h1 {
   margin-top: 2em;

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


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

 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
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!


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:


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

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 {

 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!

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”>
       <input type=“text” [(ngModel)]=“name”><br>
       <strong>You said: </strong> {{ name }}

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’;

 imports: [
   FormsModule      // add this
 providers: [],
 bootstrap: [AppComponent]

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

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!


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 #none>
       <p>The click counter is <strong>not greater</strong> than 4.</p>

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.


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’ : ‘lightgray’”>

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.

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.

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” []=“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
   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 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’;

 providedIn: ‘root’
export class HttpService {

 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() {


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.

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’;

 providedIn: ‘root’
export class HttpService {

 constructor(private http: HttpClient) { }

 getBeer() {
   return this.http.get(‘’)

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

 imports: [
   HttpClientModule  // Add here

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


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:


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

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:

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;
       } {
           font-weight: bold;
           font-size: 1.2rem;
       } {
           text-transform: uppercase;
           font-size: .9rem;
           flex-grow: 1;

And here’s the result!


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

Hop into the folder: myapp\dist\myapp</strong> 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…).


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.


Thanks for reading

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Angular and Web Workers

Angular 8 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

The Complete Node.js Developer Course (3rd Edition)

The Web Developer Bootcamp

Best 50 Angular Interview Questions for Frontend Developers in 2019

How to build a CRUD Web App with Angular 8.0

React vs Angular: An In-depth Comparison

React vs Angular vs Vue.js by Example

Microfrontends — Connecting JavaScript frameworks together (React, Angular, Vue etc)

Building CRUD Mobile App using Ionic 4, Angular 8

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

Ionic 4 & Angular Tutorial For Beginners - Crash Course

#angular #javascript #web-development

What is GEEK

Buddha Community

Angular 8 Tutorial & Crash Course

I am Developer


Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

Recommended:-Laravel Try Catch

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Christa  Stehr

Christa Stehr


Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Clara  Gutmann

Clara Gutmann


Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

I am Developer


Laravel 8 Tutorial For Beginners

In this tutorial, i will provide you some useful tutorial of laravel 8 version. So, you can learn laravel 8 an easy way.

Recommended:- Laravel Eloquent whereRaw Query Example
Recommended:- How to Get Random Records in Laravel
Recommended:- Laravel InsertOrIgnore Example
Recommended:- Laravel whereIn, whereNotIn With SubQuery Example
Recommended:- Laravel Where Null and Where Not Null Query
Recommended:- Laravel Group by Example
Recommended:- Laravel Order by Example
Recommended:- Laravel 8 Joins Example Tutorial
Recommended:- Laravel 8 – Form Validation Example
Recommended:- Laravel 8 Ajax Post Form Data With Validation
Recommended:- Laravel 8 Flash Message Example Tutorial
Recommended:- Laravel 8 Auth Scaffolding using Jetstream
Recommended:- Laravel 8 Autocomplete Search from Database Tutorial
Recommended:- How to Create Controller, Model in Laravel 8 using cmd
Recommended:- How to Use Helper Function in Laravel 8
Recommended:- Laravel 8 Send Mail using Queue Tutorial
Recommended:- Laravel 8 Google Recaptcha V3 Example
Recommended:- Laravel 8 QR Code Generator Tutorial Example
Recommended:- Laravel 8 Image Upload Tutorial
Recommended:- Laravel 8 Ajax Image Upload with Preview Tutorial
Recommended:- Laravel 8 Ajax Multiple Image Upload Tutorial
Recommended:- Laravel 8 FullCalendar Ajax Tutorial Example
Recommended:- Laravel 8 Livewire File Upload Tutorial Example
Recommended:- Laravel 8 Login with Linkedin Example Tutorial
Recommended:- Laravel 8 Multi Auth (Authentication) Tutorial
Recommended:- Laravel 8 Rest API with Passport Tutorial
Recommended:- Laravel 8 JWT Rest API Authentication Example Tutorial
Recommended:- Laravel 8 Datatables with Relationship Tutorial Example
Recommended:- Laravel 8 Joins Example Tutorial
Recommended:- Laravel 8 Summernote Image Upload Tutorial Example
Recommended:- Laravel 8 Crop Image Before Upload using Cropper JS
Recommended:- Laravel 8 – Dynamically Multiple Add or Remove Input Fields using jQuery
Recommended:- Laravel 8 PHP Guzzle Http Client GET & POST Example
Recommended:- Laravel 8 Livewire Datatables Tutorial Example
Recommended:- Laravel 8 Google Chart Tutorial Example
Recommended:- Laravel 8 Generate Fake Data
Recommended:- Laravel 8 Livewire Load More OnScroll Tutorial Example
Recommended:- Laravel 8 Dynamic Dependent Dropdown using Ajax
Recommended:- Laravel 8 Auto Load More Data On Page Scroll
Recommended:- Laravel 8 Simple CRUD Example Tutorial
Recommended:- Laravel 8 Rest API CRUD with Passport Auth Tutorial
Recommended:- Laravel 8 DataTable CRUD Tutorial
Recommended:- Laravel 8 Ajax CRUD Using Datatable Tutorial
Recommended:- Laravel 8 Ajax CRUD with Image Upload Tutorial
Recommended:- Laravel 8 Livewire CRUD with Jetstream Tutorial

#laravel 8 tutorial for beginners #laravel 8 tutorial for beginners step by step #laravel 8 tutorial #laravel 8 authentication tutorial

Sival Alethea

Sival Alethea


MongoDB with Python Crash Course - Tutorial for Beginners. DO NOT MISS!!!

Learn the most popular NoSQL / document database: MongoDB. In this quickstart tutorial, you’ll be up and running with MongoDB and Python.
⭐️Course Contents⭐️
⌨️ (0:00:00) Welcome
⌨️ (0:04:33) Intro to MongoDB
⌨️ (0:07:49) How do document DBs work?
⌨️ (0:10:34) Who uses MongoDB
⌨️ (0:13:02) Data modeling
⌨️ (0:16:30) Modeling guidelines
⌨️ (0:22:11) Integration database
⌨️ (0:24:23) Getting demo code
⌨️ (0:30:07) How ODMs work?
⌨️ (0:32:55) Introduction to mongoengine
⌨️ (0:34:01) Demo: Registering connections with MongoEngine
⌨️ (0:37:20) Concept: Registering connections
⌨️ (0:39:14) Demo: Defining mongoengine entities (classes)
⌨️ (0:45:22) Concept: mongoengine entities
⌨️ (0:49:03) Demo: Create a new account
⌨️ (0:56:55) Demo: Robo 3T for viewing and managing data
⌨️ (0:58:18) Demo: Login
⌨️ (1:00:07) Demo: Register a cage
⌨️ (1:10:28) Demo: Add a bookable time as a host
⌨️ (1:16:13) Demo: Managing your snakes as a guest
⌨️ (1:19:18) Demo: Book a cage as a guest
⌨️ (1:33:41) Demo: View your bookings as guest
⌨️ (1:41:29) Demo: View bookings as host
⌨️ (1:46:18) Concept: Inserting documents
⌨️ (1:47:28) Concept: Queries
⌨️ (1:48:09) Concept: Querying subdocuments with mongoengine
⌨️ (1:49:37) Concept: Query using operators
⌨️ (1:50:24) Concept: Updating via whole documents
⌨️ (1:51:46) Concept: Updating via in-place operators
⌨️ (1:54:01) Conclusion

📺 The video in this post was made by
The origin of the article:
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#mongodb #python #python crash course #mongodb with python crash course - tutorial for beginners #beginners #mongodb with python crash course