Angular

Angular is a TypeScript-based free and open-source web application framework. It is a platform and framework for building single-page client applications using HTML and TypeScript. This roadmap would help you as a developer to get started on learning about Angular.

To make your journey easier, pick a path

What is Typescript

Mark as done

Done

What is Typescript

TypeScript is a superset of JavaScript that adds optional static typing to the language. It is designed for the development of large applications and trans compiles to JavaScript. Learn more about this from the resources below.

What is Typescript?

TypeScript Tutorial

Understanding The Origin of Typescript

Why Use Typescript

Mark as done

Done

Why Use Typescript

TypeScript is compiled to JavaScript, which means as a superset of the latter, it can be used anywhere JavaScript could be used: both the frontend and the backend. Learn more about this from the resources below.

Why Should You Use Typescript?

Why You Should Choose Typescript over JavaScript optional

Modules

Mark as done

Done

Modules

In TypeScript, a module is a file containing values, functions, or classes. Learn more about this from the resources below.

Typescript Tutorial: Modules

Typescript Modules

Full Tutorial on Typescript Module

Union Types

Mark as done

Done

Union Types

In TypeScript, union types are variables that can store a value that can be one of the several types. Learn more about this from the resources below.

Union Types and Type Aliases in Typescript

Union Types

Union Type in Typescript Tutorial

Union Types Cheatsheet

Handbook - Union and Intersection Types optional

Classes

Mark as done

Done

Classes

Typescript supports object-oriented programming features like classes. Classes are a blueprint for creating objects in OOP. Learn more about this from the resources below.

Typescript Tutorial - Classes

How to use Classes in Typescript

Typescript Classes

Built-in Data Types

Mark as done

Done

Built-in Data Types

In this section, you will learn more about the built-in data types in Typescript and their functions. See the resources below.

Typescript Types

Learn Typescript Data Types

Types - Angular optional

Structural Typing

Mark as done

Done

Structural Typing

Structural typing does not care about the type name of an object but checks whether the object’s structure agrees with the pattern restrained by type definition. Learn more about this from the resources below.

Structural Typing in Typescript

Structural Typing Tutorial

Structural Typing in Typescript - How It Works

Interface

Mark as done

Done

Interface

An interface in TypeScript is an abstract type that tells the compiler which property names a given object can have. Learn more about this from the resources below.

A simple guide to Typescript interface: Declarations and Uses

How to use Interface in Typescript

Typescript Handbook: Interface

Typescript Tutorial: Interfaces optional

Type Inference

Mark as done

Done

Type Inference

Type inference describes where and how TypeScript infers types when you don’t explicitly annotate them. Learn more about this from the resources below.

Type Inference in Typescript

Understanding Infer in Typescript

Type Assignment and Type Inference optional

Type Guards

Mark as done

Done

Type Guards

In TypeScript, Type guards is a technique used to get information about the type of a variable and this often happens within a conditional block like if/else. Learn more about this from the resources below.

Typescript Type Guard

Narrowing Variable Types with Type Guard

Type Guards in Typescript

RxJS Subjects

Mark as done

Done

RxJS Subjects

An RxJS Subject is a special type of Observable that allows values to be multi-casted to many Observers. Learn more about this from the resources below.

What is RxJS Subject

RxJS - Working with Subjects

Learn RxJS - Subjects Tutorial

How to use RxJS Subjects, Behavior Subjects, and Replay Subjects optional

Observer Pattern

Mark as done

Done

Observer Pattern

Observer pattern can be described as the process when an object maintains a list of its dependents and automatically notifies them of any state changes by calling one of their functions. Learn more about this from the resources below.

Understanding Observer Software Pattern

Reactive Programming: Observer Pattern

Building your own Observable: The Observer Pattern

Observable Lifecycle

Mark as done

Done

Observable Lifecycle

An Observable Life Cycle represents the number stages that every observable instance passes throughout its lifetime. Learn more about this from the resources below.

Understanding RxJS Observable Lifecycle

Observable and RxJS Examples

A Simple Explanation: What is RxJS Observable?

Marble Diagrams

Mark as done

Done

Marble Diagrams

Marble Diagrams is a timeline where you can illustrate the state of your observable during its execution. Learn more about this from the resources below.

RxJS Marble Diagrams

How to read RxJS Marble Diagrams

Use Marble Diagrams to Understand RxJS Operators

Operators

Mark as done

Done

Operators

In RxJs, an operator is a pure function that takes an observable as input and the output is also an observable. Learn more about this from the resources below.

RxJS Operators

RxJS Operators Tutorial

Learn RxJS - Operators

Observables vs Promises

Mark as done

Done

Observables vs Promises

In this section, you will learn about the differences between “Observables” and “Promises” in RxJs. See the resources below.

RxJS vs Promises

The Ultimate Guide to Observables vs Promises

Promises vs Observables - Angular Tutorial

Angularjs vs Angular

Mark as done

Done

Angularjs vs Angular

In this section, you will learn about the difference between AngularJs and Angular. See the resources below.

What is the difference between AngularJS and Angular

Important Difference between Angular and Angular JS in 2022

Directives

Mark as done

Done

Directives

Directives are classes that add additional behavior to elements in your Angular applications. Learn more about this from the resources and find some specific directive tools in the subsection below.

What is Angular Directives?

Angular Directives Tutorial

Directives in Angular Applications

ngClass

Angular - NgClass

Angular NgClass Example

How to style component using NgClass

Angular NgClass Directive

ngStyle

Angular - NgStyle

Using NgStyle in Angular for Dynamic Styling

ngFor

Angular - NgFor

NgFor Directive in Angular

ngIf

Angular - NgIf

Angular ngIf: Complete Guide

Angular NgFor and NgIf Directives Explained

How to use NgIf Else in your Angular Application

Pipes

Pipes - Angular

Angular Pipes: Learn How to Create and Implement

Angular Pipe Tutorial

Http Client

Mark as done

Done

Http Client

HttpClient is a built-in service class available in Angular. Learn more about this from the resources below.

Angular Http Client: Quick Start

How to use HttpClient in Angular

Angular Http Client Quick Start Tutorial

Services

Mark as done

Done

Services

In Angular, services let you define code or functionalities that are accessible and reusable in many other components in your Angular project. Learn more about this from the resources below.

What is a Service in Angular and why you should use it

Introduction to Angular Services and Its Features

Understanding the Purpose of Services in Angular

Routing

Mark as done

Done

Routing

Routing in Angular is the process of navigating from one view to another as users perform tasks in web apps. Learn more about this from the resources below.

Angular Routing

A Complete Guide to Angular Routing

Routing and Navigation in Angular

Understanding the Purpose of Routing in Angular

Guards

Mark as done

Done

Guards

In Angular, Guards are interfaces which can tell the router whether or not it should allow navigation to a requested route. Learn more about this from the resources below.

Understanding Angular Guards

Angular Guards Tutorial

How to use Route Guards with Routers in Angular optional

Templates

Mark as done

Done

Templates

A template is a form of HTML that tells Angular how to render the component. Learn more about this from the resources below.

Angular Template Tutorial

Angular Templates and Views optional

Interpolation

Interpolation in Angular

Interpolation and Template Expressions

Property Binding

Angular Property Binding

Property Binding in Angular

Event Binding

How Event Binding Works

Event Binding in Angular

#ref variables

Angular Template Reference Variables

In Depth look at Angular Template Reference Variables

Architectural Overview

Mark as done

Done

Architectural Overview

Learn about the Architectural overview of Angular using the resources below.

Architectural Overview Guide

Angular Architectural Overview and Concepts

Architecture of Angular optional

Angular - Architecture Overview

Angular Application Architecture Overview optional

Forms

Mark as done

Done

Forms

Forms are used to handle user input data in Angular. Learn more about this from the resources below

Introduction to Forms in Angular

Angular Forms Guide: Template Driven and Reactive Forms

Angular Forms Tutorial

Lifecycle Hooks

Mark as done

Done

Lifecycle Hooks

Lifecycle Hooks are a special functionality in Angular. Learn more about this from the resources below.

Angular Lifecycle Hooks Explained

Lifecycle Hooks in Angular Explained with Examples

Complete Guide: Lifecycle Hooks

Understanding Angular Lifecycle Hooks optional

Got feedback?