Angular Tutorials & Learning Path

Throughout this tutorial series and learning path you'll learn Angular--the most popular platform for building front-end web applications

Using Angular, you can take advantage of a powerful TypeScript platform and tools to create applications for web, mobile and desktop. TypeScript is a superset of JavaScript with powerful OOP abstracts and a strongly typed system that compiles to JavaScript.

With Angular you have strong tools and design patterns to build either small or large web projects.

Angular is developed and maintained by Google. It has a large community which means you can find help on the web if you have any issues implementing your project requirements.

Our Angular learning path will offer the necessary tutorials, PDF books, for beginners, and examples to get started using this framework in your next project.

Angular 7|6 with PHP and MySQL RESTful CRUD Example & Tutorial

In this tutorial, you'll learn to create an example Angular 7 application with a PHP REST API on top of a MySQL database.

Angular 7|6 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms

In this tutorial, you'll learn to create an example Angular 7 application with a PHP REST API on top of a MySQL database.

Kaima Abbess

Multiple File/Image Upload with Django, Angular 7 and FormData

Throughout this tutorial, we'll see how you can implement multiple file upload in Django and Django REST Framework with a step by step example. Our application will expose an /upload...

Omar Bakky

Django REST Framework Image File Upload Tutorial & Example [FormData & Angular 7 UI]

Throughout this tutorial, we'll see how you can implement file upload in Django and Django REST Framework with a step by step example. Our application will expose an /upload endpoint...

Omar Bakky

PHP Image/File Upload Tutorial and Example [FormData and Angular 7 Front-End]

In this tutorial, you'll learn how you can upload files in your PHP web application. We'll not use any framework but plain PHP. Next, we'll see how we can use...

Angular 7 ngForm, ngNoForm and Template Reference Variables

In this quick tutorial, you'll learn how to use NgForm in Angular 7 to work with forms. You'll also learn about template reference variables and how you can use them...

How to Post FormData (multipart/form-data) with Angular 7 and HttpClient

In this quick tutorial, you'll learn how to work with FormData in Angular 7 and how to post it to a web server via a POST request and HttpClient.

Angular 7 File Upload with Progress Bar Tutorial and Example

In this tutorial, we'll learn how to upload files in Angular 7. For the backend we'll be using Nest.js We'll see how to use HttpClient to send POST request with...

Typed and Full Responses and Headers in Angular 7 HttpClient: Link Header Pagination Example

In this tutorial, we'll learn how to get headers and full responses with HttpClient in Angular 7

Angular 7|6 By Example: HTTP GET Requests with HttpClient (Services, async pipe and Observables)

How to use HttpClient to make HTTP GET requests in Angular 4|5

Angular Router Tutorial: Learn Angular 7|6 Routing & Navigation by Example

In this tutorial part, we’ll learn about Angular Router by example and will teach you everything you need to start using Angular routing to build Single Page Applications.

Ahmed Bouchefra

Angular 6|7 RxJS 6 In-Depth Tutorial & Example

In this tutorial, we'll learn to use the RxJS 6 library with Angular 6. We'll learn about how to import the Observable class and the other operators. How to subscribe...

Angular 7 Tutorial Course — Build a Portfolio Web Application with Angular

Angular 7 is out and we'll use it to continue with our front-end tutorial series designed for Python developers. This tutorial is part of an ongoing series for teaching Angular...

What is an Angular 6|7 Workspace?

What is an Angular 6|7 Workspace?

Angular 7 Tutorial: Login & Reactive Form Example with Validation

In this tutorial, we'll learn to use the template-driven approach in Angular 7 to work with forms. We'll learn about the NgForm, ngModel and ngSubmit and how to create an...

Angular 7|6 Tutorial: Using Angular HttpClient with Node & Express.js - Example POST Requests

In this tutorial, we'll learn to use the template-driven approach in Angular 7 to work with forms. We'll learn about the NgForm, ngModel and ngSubmit and how to create an...

Angular 7|6 Tutorial: Building and Submitting a Form (ngModel | ngForm | ngSubmit) to a Node and Express.js Authentication Server

In this tutorial, we'll learn to use the template-driven approach in Angular 7 to work with forms. We'll learn about the NgForm, ngModel and ngSubmit and how to create an...

Angular Http — Angular 6|7 HttpClient Tutorial

How to use HttpClient to make HTTP Requests in Angular 4.3+

Angular 7|6 Tutorial Course: Securing the UI with Router Guards and UrlTree Parsed Routes (for Login Redirects)

We'll be learning how to use Router Guards and UrlTree data structures to protect the UI if the user is not logged in and redirect them to the login interface...

Angular 7|6 Authentication with Firebase (Google | Email & Password): Login, Register, Email Verification and Password Recovery

In this tutorial you will add email and social (Google) authentication with Firebase.

Angular Modal Example: Build Angular 6|7 Material Form and Modal Dialog

In this tutorial, you'll build an example login UI with a form and modal dialog styled with Angular Material.

Angular 6|7 Material Form & Date Picker Example

In this tutorial, you'll learn how to use Angular Material to style forms in your Angular 6|7 web app.

Angular 7|6 Tutorial Course: Angular NgModules (Feature and Root Modules)

In this course, you'll learn to develop your first Angular 7 application with routing, CRUD operations and Bootstrap 4 UI

Angular 7|6 Tutorial Course: Nested Router-Outlet, Child Routes & forChild()

In this course, you'll learn to develop your first Angular 7 application with routing, CRUD operations and Bootstrap 4 UI

Angular 7|6 Tutorial Course: CLI, Components, Routing & Bootstrap 4

In this course, you'll learn to develop your first Angular 7 application with routing, CRUD operations and Bootstrap 4 UI

Angular 7|6 Tutorial Course: Authentication with Firebase (Email & Password)

In this course, you'll learn to develop your first Angular 7 application with routing, CRUD operations and Bootstrap 4 UI

Angular 6|7 Tutorial — CRUD & Python REST API

Throughout this Angular 6 tutorial for beginners, we'll learn to build a full-stack example web application with Angular 6, the latest version of Angular—the most popular framework/platform for building mobile...

Angular 6|7 ngIf by Example

Throughout this quick tutorial, you'll be learning about how you can use ngIf in your Angular 6 applications.

Angular 6|7 ngFor Example

In this tutorial, you'll learn about the ngFor directive by example in Angular 6

Angular 7|6 In-Memory Web API Tutorial | CRUD Example

In this tutorial, you'll see, by example, how to use the in-memory web api module with Angular 7 to create a fake REST API back-end with CRUD operations. This is...

Angular 7|6 Material Data-Table Tutorial & Example

Angular 7 Material data tables provide a quick and efficient way to create tables of data with common features like pagination, filtering and ordering.

Angular 6|7 CRUD with Firebase & Firestore

In this tutorial, you'll be using Angular 7 with Firebase and Firestore to create a project that implements the common CRUD operations.

Angular 7 Tutorial: Mastering Angular CLI 7

In this tutorial you'll be learning how to use Angular CLI 7 (the latest version as of this writing) to create Angular applications and different constructs like modules, services, components...

Angular 6|7: JWT Authentication Tutorial

In this tutorial, you'll learn, by example, how you can implement JWT authentication in your Angular 7 application.

Angular 6|7: HttpClient—Building a Service for Sending API Calls and Fetching Data

In this tutorial, you'll be learning, by example, how to use Angular 7 and HttpClient to send HTTP requests to remote servers for fetching, creating and updating data.

Angular 7 Bootstrap 4 UIs: ng-bootstrap and ngx-bootstrap [Part 1]

In this tutorial series, you'll learn to use Angular 7 & Bootstrap 4 to build professional grade UIs.

Angular 7!

Angular 7 beta is released

Getting started with Material Design 6 in Angular 6

How to get started with Material Design 6 in Angular 6

Angular 7 Features

Angular 7 New Features

Angular 6 Universal Example Application with Express.js

Throughout this tutorial we are going to build an example, server side rendered, web application with Angular 6 and Express server.

Deploying Angular 6|7 Apps to Github Pages

In this tutorial we'll see how to deploy Angular 6 apps to Github pages

Building Angular 6|7 Universal Apps (Server Side Rendering)

In this tutorial we'll see how to render Angular 6 universal apps on the server

RxJS 6 for Angular Developers Tutorial by Example

In this RxJS 6 tutorial you'll learn about the latest version of RxJS, a library that implements Reactive programming in JavaScript. You'll learn about the core RxJS 6 concepts such...

Angular 6|7 Router: Lazy Loading Modules Tutorial (loadChildren() Example)

In this tutorial, we'll see by example Angular 6 routing and lazy loading components using feature modules and the loadChildren() method

Angular 6|7 Router: Resolve (Route Resolver) Example

The Angular 6 Router provides a resolve property that takes a route resolver and allows your application to fetch data before navigating to the route (i.e resolving route data)

Angular 6|7 Router: Route Animations Tutorial and Example

The Angular 6 Router supports adding animations when navigating between different routes in your application. In this tutorial, we'll learn how to use the Angular’s animations API to play animations...

Angular 6|7 (Reactive) Forms Tutorial and Example

In this tutorial part of the Angular 6 series we'll learn to use forms by creating a simple example using the model driven approach

Ionic 4/Angular Tutorial - Ionic 4 Router (Routing and Navigation Example)

Throughout this tutorial, we'll see how to add routing to Ionic 4 with the Angular 6 router

Ionic 4 Upgrade: Updating From Ionic 3 to Ionic 4/Angular 6

Throughout this tutorial, we'll see how to upgrade your Angular 6 project to use RxJS 6

Angular 6 Upgrade: Migrating to RxJS 6

Throughout this tutorial, we'll see how to upgrade your Angular 6 project to use RxJS 6

Angular 6 Material Design Tutorial & Example

In this tutorial, we'll be learning how to use Angular 6 Material Design to build a beautiful and professional grade UI interface for our Angular front-end application

Angular 6 Elements Tutorial by Example: Building Web Components with Angular

In this Angular 6 Elements tutorial by example we'll learn how to use Angular 6 to build web components or custom elements.

Learn Angular: Full-Stack & CRUD Angular 6 PDF Tutorial

In this Angular 6 PDF tutorial, you'll going to learn how to build full-stack web applications with Angular 6 and a Python back-end.

Angular 6 and Bootstrap Tutorial

In this Angular 6 tutorial we'll learn how to use Bootstrap 4 to build professional UIs.

Angular 7 Upgrade: ng update Angular 6 CLI

In this short guide we'll see how to update Angular core framework and Angular CLI 6 to the latest Angular 7 version and upgrading existing projects to use v7

Angular 6|5 Tutorial: Integrating Angular with Django

In this tutorial we'll see how we can integrate the Angular 6 front-end application with the Django back-end.

Angular Tutorial (Updated to Angular 7)

In this tutorial series we'll cover, the new Angular 6 features, the basics and the in-depth concepts of Angular 4/5/6 framework, starting with how to install the Angular CLI 6...

The Angular 6|7 Router: Named and Multiple Router-Outlets (Auxiliary Routes)

In this tutorial, we'll see advanced uses of the `` component such as how to create named, multiple outlets and auxiliary routing.

The Angular 6|7 Router: Using RouterLink, Navigate or NavigateByUrl

In this tutorial we're going to see how to navigate with the Angular Router using routerLink, Router.navigate() and Router.navigateByUrl().

The Angular 6|7 Router: Handling Route Parameters with Snapshot and Observables (ParamMap)

In this tutorial we're going to see how to handle route parameters with the Angular Router using different methods: Snapshot and ParamMap Observable.

Angular 4|5 Material Dialog with Example

This tutorial shows you how you can use Angular 4|5 Material to build Metrial UI dialogs for your web application

Ahmed Bouchefra

Angular 6 Tutorial: Angular Components Explained

This tutorial explains Angular 6 components, what are they? And how to create them?

Ahmed Bouchefra

Single Page Apps with Flask and Angular 4|5 Tutorial Series

In this tutorial series we'll be using Python, Flask, SQLAlchemy and Angular 5 to build a modern RESTful web application with an architecture that consists of a front-end application with...

Kaima Abbess

Using Bootstrap 4 with Angular 6|7

In this tutorial we will see how to use Bootstrap 4 to style websites built using the Angular 6|5 framework. We'll see how we can easy integrate both of them,...

Building an Ionic 3/Angular 4|5 Application with a GraphQL API

In this tutorial we'll see how to build a CRUD Ionic 3 mobile application (or if you prefer an Angular 4+ web application) using the modern GraphQL-based API

3+ Ways to Add Authentication to Ionic 3 (Angular 4|5) Applications

In this article we'll look at the available options for adding authentication to your Ionic 3 application

QuickTip: Django and AngularJS Conflicting Interpolation Symbols

In this quick-tip post we'll see how to change the conflicting symbols for template tags when using Django and AngularJS

Create Ionic 3/Angular 4 CRUD Application with Google's Firestore and AngularFire2

In this tutorial we'll use the new Google's Firestore database to create a simple Ionic 3 mobile application with CRUD (Create, Read, Update and Delete) methods using Angularfire2. We'll start...

Building Modern Web Apps with Python, Django Rest Framework and Angular 4|5

In this tutorial we are going to learn how to get started building modern web applications with Python, Django and Django Rest Framework as the back-end stack and the new...

Adding Email/Password and Facebook Authentication to Ionic 3/Angular 4+ with Firebase and angularfire2

This tutorial will cover how to add Email/Password authentication to Ionic 3/Angular 4 apps using Firebase and angularfire2

Getting Started with Ruby on Rails 5.1.4 and Angular 2+ (Currently Angular 4)

Getting Started with Ruby on Rails 5.1.4 and Angular 2+ (Currently Angular 4)

Building Server Side Rendered Apps with the Angular Universal Starter

How to build server rendered apps with Angular Universal Starter

Laravel 5.4 Angular 2+ Tutorial : Building a CRM - Part 1

A series of tutorials for building a Laravel 5.4 web app with Rest APIs and Angular 2+ front end

How To Read QR Codes In Angular ?

Reading QR Codes in Angular 4+

Create a QR Code Generator with Angular 4+

How To Generate QR Codes In Angular 4+ Applications

Angular 6 Tutorial for Beginners

This tutorial will help you learn Angular 2 framework as a beginner

Angular 2 CRUD generator

How to quickly generate a CRUD app based on Angular 2 tutorial

What is new with Angular 1.6 ?

What is new with Angular 1.6 ?

How to output current Angular 2 version in your app

How to output current Angular 2 version in your app

Getting started with Angular 4

Getting started with Angular 4

Angular 2 and Electron starters and boilerplates

In a previous post we have seen how to use the Angular CLI and Electron to build Desktop apps with Angular 2 and Electron .In this post we are going...

Getting started with Angular 2 tutorial series - Part 1

In this tutorial,which belongs to a series of tutorials, we are going to cover Angular 2 .What is it ? Why use it ? and how to use it ?...

Filters in Angular.js tutorial

In this tutorial we are going to cover Angularjs filters .Essencially what are they ? and how can be used ?

Getting started with Angular 2 CLI tutorial

In this tutorial we are going to get started with Angular 2 CLI

Building an Arabic transliteration system or virtual keyboard using Angular.js

This tutorial shows you how to build a transliteration system(in my case for Arabic language) or virtual keyboard using Angular.js