Angular Hub

Angular hub is a collection of articles, useful links, tutorials and videos about Angular. See also weekly categorized content.

General

Top

Lifecycle Hooks
A Step-By-Step Guide for Building Master-Detail User Interfaces with Angular This is a detailed tutorial about building a Pokédex application by using the master-detail interface pattern and Angular.
File Uploads in Angular with a Node and Hapi Backend Jecelyn Yeen shows create an app to upload files with Angular and hapi.
Angular constructor versus ngOnInit And here's another short article that explains the differences between the ngOnInit lifecycle hook and the constructor method.
Visualizing Data with Angular and D3 A cool guide showing you how to create an interactive SVG visualization and bind user interactions with Angular and D3.
Building maintainable Angular applications
How to Track Analytics with Redux and Google Tag Manager Johanna shows how to use ReduxBeacon to integrate the Google Tag Manager in your application by using Redux or ngrx/store.
Using decorators and observables to implement retry Kwinten describes how he created a custom decorator that retries to call the backend, if a call failed.
5 Features To Watch Out For in Angular v4
Angular Modules vs ES6 Modules Juri explains in detail the difference between ES6 Modules and Angular Modules.
Planning An Angular Application Really useful list of things to consider when planning an Angular application –from tooling all the way through to deployment and performance strategies. If you like this outline, you'll find Todd's complete work in this whitepaper.
How does Angular teach you to be a better a Software Engineer Opinionated framework like Angular (other frameworks too for that matter, remember React is a library) can teach you many of the industry’s best practices and help you to adopt mindset necessary to successfully implement nontrivial web applications.
Wrap any jQuery plugin with Angular component — case study Michal explains how to wrap the slick-carousel jQuery plugin into an Angular component.
Exploring The New Meta Service in Angular Version 4
Understanding Angular modules (NgModule) and their scopes The article explains what NgModules are, when you should import NgModules, and how to manage SharedModules.
Angular 2 with Array.include and Object.entries A quick tip on how to use Array.include and Object.entries in your Angular
File Uploads in Angular with a Node and Hapi Backend Jecelyn shows how to create a drag and drop image uploader for single and multiple files with Angular and Hapi.js.
Angular 2 + Node.js - Build Socket Chat Application Learn how to create a chat app using Angular and Node.js. We'll be using socket.io, express.js on the server, along with gulp and Angular
Lazy Loading in Angular
Preloading in Angular
Removing Roadblocks in the Move to Angular 4
Inspiration for Custom Decorators in Angular You can leverage decorators in your apps and create powerful things with them. Decorators are not only for frameworks or libraries, so be creative and start using them.
Creating and Maintaining Documentation
Custom Preloading and Lazy Loading Strategies with Angular
Understanding Change Detection Strategy in Angular
Angular Model Pattern
Single-Page Applications with Angular 2 and ASP.NET Core
Create the toJSON operator in Angular
Setting Default Headers in Angular
Hook into Angular Initialization Process For shares how to use the APP_INITIALIZER token to run your code before the application was loaded and shows other use cases for the injection token.
Angular 2 Best Practices: Change Detector Performance Accessibility (a11y) is often an overlooked aspect of building web applications, especially JavaScript Single Page Apps. Things like forms, routing and event handling are often easy to get wrong in a JavaScript framework
Highlight Text Within a String Using Angular and Regular Expressions
How do Protractor and Angular synchronize?
How To Architect Enterprise Single Page Applications (SPA) Code is complex. When we write code we don’t know beforehand what we are trying to do. We get a problem, we break it down into a number of steps and we begin to write each line, making mistakes, correcting, adjusting, making more mistakes (swearing) and eventually what we see in front of us hopefully does what we intended it to do
Don’t use hidden attribute with AngularJS 2 The Hierarchical DI is a core feature that Angular leans on a lot. Sometimes, the resolution process looks complicated and long.
Drag & Drop in Your Angular Apps With ng2-dragula
Using NgUpgrade Like a Pro: Lazy Loading AngularJS Applications Victor wrote a new part of an article series about upgrading Angular applications. This time he shows you how to support lazy loading in hybrid mode with AngularJS and Angular.
Functional Reactive Angular Revealed Humans think sequentially and chunk down. Object-Oriented Programming requires us to think holistically, frequently in parallel, and chunk up.
[How to make MultiLingual web applications in Angular](How to make MultiLingual web applications in Angular)
Building an Angular Video Player with Videogular
You may need Protractor for more than testing your Angular 4 app… Interesting piece by Fabien showing you how to use Protractor to catch issues with NgZone and improve the performance of your application.
Common mistakes with Angular Universal
PWAs with Angular: Being Reliable
The Angular HTTP Client - Quickstart Guide
Essential Angular: Compilation
Essential Angular: NgModules
Essential Angular: Components and Directives
Essential Angular: Dependency Injection
Essential Angular: Change Detection
Essential Angular: Testing
Angular: Bad Practices
A Taste From The New Angular HTTP Client
Create A Photo Gallery With Angular 4
The mechanics of property bindings update in Angular

Directives

Top

Angular ngFor, and the compiler In this extensive article Todd explores the built-in ngFor directive and demonstrates how Angular expands the directive to a template element and composes the view.
Angular Async Data Binding with ngIf and ngElse Cory shows how to use a new, special ngIf and ngElse syntax to bind async data to an Angular template.
NgIf Else lands in Angular 2.x+/4.0
NgUpgrade with Lazy Loading
Angular Components and Directives - a Beginner-Friendly Introduction: Learn How To Extend The Browser And Build Your Own HTML Tags
NgUpgrade in Depth In this long article Victor explains everything you need to know about the mechanics of the NgUpgrade library.
Angular 4: Enhancing your Templates With 'else' & 'as'
Create directive for showing error message in form with Angular
Show a loading indicator in Angular using ngIf/else, the as keyword and the async pipe
Learn Several Angular Advanced Features - ng-template, ng-container and ngTemplateOutle
Leverage Structural Directives to Create Powerful Components in Angular
Enhanced ngIf and ngFor in Angular version 4.0.0 Juri shares how the enhanced *ngIf and *ngFor directives of Angular version 4.0.0 make working with observables more convenient.

Templates

Top

Angular 2 — A quick intro about template syntax A nice summery for beginners: Carlos made a collection of directives and the different ways to make property and data bindings in templates.

Class/Styling

Top

Angular 2+ Classes with NgClass and NgStyle - Tutorial A tutorial about creating dynamic styles in multiple ways by using NgClass and NgStyle.
Advanced Styling Guide (v4+) Gerard shows different options to style Angular components and directives.
Create an hierarchical style architecture A short article about creating a better SCSS architecture by using the /deep/ selector.
Learn The Angular Host Context CSS Selector, See the CLI SAAS integration In Action
Angular Component Styling Complete Guide In this post, we are going to learn the many options that we have available for styling our Angular components. We will talk about when to use each feature and why, and also cover how to debug our styles if something is not working

Forms

Top

Real World Angular — Form Formation (Akshay Nihalaney) This is the third part of an article series showing you how to accept, validate and save data with reactive forms.
Angular Forms in Depth (Victor Savkin) This is a long, in-depth article about forms, covering the FormsModule and the ReactiveFormsModule.
Handling Multiple Checkboxes in Angular Forms (Netanel Basal) A quick tutorial about how to render a list with multiple checkboxes by using reactive forms.
Reactive Forms in Angular: Creating a Custom Validator A quick guide about how to use reactive forms to define a custom form validator. If you like the article, you might want to check out their article "Reactive Forms in Angular: An Introduction".
Angular Filter Checkboxes A quick tutorial about using checkboxes to filter lists.
Component architecture recipes for Angular’s reactive forms (Todd Motto) In this long article Todd shares some patterns for using a component architecture with reactive forms.
How to Integrate reCAPTCHA in your Angular Forms (Netanel Basal)
Angular 2 form fundamentals: reactive forms (Todd Motto)
Configurable Reactive Forms in Angular with dynamic components (Todd Motto)
Username Availability with an Asynchronous Validator in Angular (Josh Morony)
Understanding the compareFn Input in Angular (Netanel Basal)

Pipes

Top

Sorting with Pipes in Angular A quick tutorial showing how to create a custom pipe for sorting tables.
Three Things You Didn't Know About the AsyncPipe Christoph shares three special AsyncPipe features, e.g. how to use the AsyncPipe to subscribe to observables that emit multiple values.
Using Pipes in Angular Burke compares how to use built-in and custom pipes in Angular 1.x and Angular 2+.

Services

Top

Creating an Angular 2 Injectable Service Todd compares the .service() method of Angular 1.x with Angular 2+ services. There's also another article by Lukas comparing ng-model (Angular 1.x) with ngModel (Angular 2+).
Angular Singleton Service and a Loading Indicator
How to use a service inside another service in Angular 2?
Angular Service Workers

Routing

Top

RxJs

Top

Error Handling in RxJs
Avoid Zombie Subscribers in Angular A quick 6-minutes tip by Sean about avoiding zombie listeners with the use of a @once decorator.
Making use of RxJS in Angular Wojciech shows what Functional Reactive Programming (FRP) is and how you can use FRP in your Angular application with RxJS.
Angular 2 — TwitchTV : Dynamic Search Result using Angular’s HTTP Service + RxJS Observables In this tutorial you'll learn how to use Angular's HTTP service to create a Twitch Search application.
When to Unsubscribe in Angular
Deep Dive Into The RxJs switchMap Operator - How Does it Work ? A Less Well-Known Use Case (selector functions) This is one of those few operators that we will probably use in just about any application that we build
RxJS Subjects for human beings Let’s look at the facts. Subject is both an Observable and Observer.
RxJS: Observables, observers and operators introduction RxJS is an incredible tool for reactive programming, and today we’re going to dive a little deeper into what Observables and observers are - as well as learn how to create our own operators.
Using the takeUntil RxJS Operator to Manage Subscriptions Declaratively
Querying a Normalized State with RxJS in Angular
Angular and RxJS: Create an API Service to Talk to a REST Backend
Reactive Programming in Angular In this long article Victor explains why every Angular application is a reactive system and what you need to know about reactive programming as an Angular developer.
Top 7 RxJS Concepts for Angular Developers

State Management

Top

Managing State in Angular Applications A long and super interesting article about the state management in general, the different types of states, and how to avoid common mistakes in your Angular application with by using patterns.
From Redux to Angular ngrx/store Julien shows how to migrate your application from using Redux to using ngrx/store.
Managing State in Angular Apps with ngrx/store and ngrx/effects The first part of a tutorial about how to create a todo app with ngrx/store, ngrx/effects.
UI state management with Redux in Angular 2 In this extensive tutorial Hristo shares how to use @ngrx/store and Bootstrap 4 to manage user interface states with Redux.
What I have learned using ngrx/Redux with Angular
Reusing ngrx/effects in Angular (communicating between reducers)
Implementing a Meta-Reducer in ngrx/store
How to Really use NgRX
Reactive apps with Angular & ngrx
Using NgRx 4 to Manage State in Angular Applications
Listening for Actions in @ngrx/store
Dynamic View Model with @ngrx/store
Ngrx and Angular 2 Tutorial: Building a Reactive Application
Connect Angular Forms to @ngrx/store

Component

Top

Custom SnackBar using Angular2/Material Learn how to extend the official Material Design SnackBar to create a custom SnackBar with different styles and behavior.
Component Property Binding with @Input() in Angular 2 Todd compares in detail the various ways to pass information into a component in Angular 1.x and Angular 2+.
Understanding Component Architecture: Refactoring an Angular App In this article you'll learn how to break a single component into a structured tree of smaller components.
Angular Component Reuse Strategy Julia shows how the Angular router reuses components and how you can modify the default behavior.
Component Interaction in Angular Kevin summarizes the different possibilities components communicate with another.
Using Angular Components in a Non-Angular App Shridharan explains how to use multiple Angular components in a project that is not written in Angular, but a simple JavaScript application.
Angular Component Design: How to Avoid Custom Event Bubbling And Extraneous Properties in the Local Component Tree A long and interesting article about component design patterns, the separation of Container Components and Presentational Components, and potential issues with it.
How to create (and use) custom components with Angular 2
Component API Design - How To Make Simpler and More Reusable Components Using ng-content
Building Material Themed Components
Here is what you need to know about dynamic components in Angular
Learn Angular Template References And How To Configure a Component With Partial Templates
Here is why you will not find components inside Angular

Content Projection

Top

From transclusion to content projection Juri compares the concepts behind transclusion in Angular 1.x with the content projection mechanisms of Angular 2+.
Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve Component API Design
Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates The core directives ng-container, ng-template and ngComponentOutlet all combine together to allow us to create highly dynamical and customizable components

Events

Top

Event Emitters in Angular Netanel takes a look at component communication and event emitters in an Angular application that uses RxJS.
Implementing Event Modifiers in Angular In this article Netanel shows how he implemented Event modifiers, a feature from the Vue library, in Angular.

Dependency Injection

Top

DOM Manipulation

Top

Exploring Angular DOM manipulation techniques using ViewContainerRef The new Angular version runs on different platforms — in a browser, on a mobile platform or inside a web worker. So a level of abstraction is required to stand between platform specific API and the framework interfaces.
The mechanics of DOM updates in AngularAngular 2 Best Practices: Change Detector Performance

Animation

Top

From ngAnimate to Angular 2 animate Lukas compares the ngAnimate module from Angular 1.x with the way animations work in Angular 2+. If you like these kind of articles, you will all like "From ng-switch to ngSwitch" by Todd Motto.
Angular 2/4 - Router Animation Tutorial & Example
Animated slide panel with Angular
Creating Stagger Animations in Angular 4
A New Wave of Animation Features in Angular In this detailed article Matias will show you everything you need to know about Angular and animations: new features, animation options, query() and stagger(), sub animations, and the AnimationBuilder.
Angular — Supercharge your Router transitions using new animation features (v4.3+)
Learn Angular Animations with 5 Examples

Peformance

Top

Making your Angular apps fast In this incredible article Pascal shows how to improve the performance of a demo application rendering 10000 draggable SVG boxes.
Lazy Loading vs Preloading Modules — Which should you choose Paul explains why and how you should use both, lazy loading and preloading modules, together to make your application optimized for user interaction.
Profile and optimize your Angular 2 apps Mosh shows how you can use the JavaScript CPU Profile to find and fix performance problems due to view rendering in your Angular applications.
Using Zones in Angular for Better Performance In this article Pascal writes about using the NgZones API to increase the performance of your Angular application.
Analyzing bundle size with the Angular CLI and Webpack A quick and interesting tip on how to track the size of bundled Angular applications with the Webpack bundle analyzer.

Authentication

Top

User Authentication with Angular and ASP.NET Core A super detailed step-by-step tutorial showing you how to add user authentication to an Angular application powered by an ASP.NET Core backend API.
Authentication in Angular & JWT
Let’s logout of your Angular4 app
Angular Authentication: Using the Http Client and Http Interceptors
Angular Authentication: Using Route Guards

Production/Deployment

Top

Angular Production Builds
How to host your Angular 2 application in AWS with S3 @Amazon, @Production
Angular Continuous Integration Interesting slides for Raúl's talk at ngVikings 2017 about continuous integration with Angular and Travis CI.
Writing an AOT Compliant Angular Library Dylan writes about his experiences from creating his own library with shared services and how to make it work with ahead of time compilation.
Continuous everything with Angular, Travis CI, Firebase and Greenkeeper A quick guide by Janez showing you how to use Travis CI for continuous integration, Firebase for hosting and Greenkeeper as an automated dependency management tool with your Angular application.
Angular Production Builds
Converting your Angular CLI application into a NPM Module
Angular Build with Webpack and Babili
An Angular 2 Webpack setup for development and production
Converting your Angular CLI application into a NPM Module: Part Two
Writing AoT-friendly applications

Typescript

Top

Compiler

Top

Closure Compiler and Http Requests
Webpack 3 vs Webpack 2
Everything you need to know about debugging Angular applications A detailed article about ways to degub an Angular application, from debugging the source code to debugging in the browser console.
A Deep, Deep, Deep, Deep, Deep Dive into the Angular Compiler The Angular compiler is an amazing piece of engineering, as we are going to see soon. There is a good reason it is more than 1MB of code, and is the result of more than a year of hard work by the Angular team.

Testing

Top

I do believe that the frameworks should encourage testing and a crucial point is their speed. Jest provides all of this and we've already switched in Ryanair from karma + chrome to Jest
Writing a Basic Component Test with Angular Testing Utilities The article explains how to use Angular's testing utilities and a basic pattern to write component tests.
Testing Routes in Angular 2 A detailed tutorial about how to test your application's routes with Angular.
Testing Angular Faster With Jest Michal shows how to use Jest and Jasmine for unit testing your Angular application, instead of Karma and Jasmine.
Using Stubs and Mocks in Jasmine to test your Angular code Andy writes about unit testing your Angular application with test stubs and mock objects by using Jasmine.
Unit Test Your ngrx/effects in Angular
Testing Dumb Components in Angular
Testing Asynchronous Code with FakeAsync in Angula
How To Debug Angular Tests - An Step-by-Step Example of How To Troubleshoot a Failing Test
Angular Testing: Using Spies
Introduction to Unit Testing in Angular
Testing services with http in angular
Angular Testing In Depth: Components

Tooling

Top

Upgrading to the latest Angular CLI @Angular/CLI
Top 10 Angular VS Code Extensions A useful website that collects Angular components and libraries with different categories, e.g. UI components, code style, performance or dev tools.
Using Yarn with Angular CLI
Angular-cli and Global SASS Variables A quick tip about how to use global SASS variables in your Angular component.
Powerful Analytics tool for Angular applications: Angulartics2 Most analytics providers do not automatically track the browser’s navigation history, making it difficult to track Single Page Applications (SPAs) like Angular applications.
Angular CLI: multiple apps in the same project And here's another brief tip: Yakov shares how to modify the Angular CLI to work with an Angular project that has multiple apps.
The Ultimate Angular CLI Reference Guide
7 Angular Tools That You Should Consider
angular-tslint-rules: a configuration preset for both TSLint & codelyzer
Angular CLI and OS Environment Variables

Backend

Top

Serverless REST API with Angular, Persistence and Security A tutorial about creating a full stack application with static file hosting, a secure REST API, and a robust persistence layer.

Desktop

Top

Integrating Angular and Electron using ngx-electron And here's another short tip showing how to use Thorsten's small library ngx-electron to integrate Electron in an Angular application.

Mobile

Top

Ionic: How to Use Google Maps & Geolocation (Native & JavaScript)(by Baadier Sydow)
Step by Step Tutorial of Ionic 3, Angular 4 and Google Maps Directions Service A detailed guide by Didin about how to build an Ionic 3 application using Angular 4 and the Google Maps Javascript API. If you liked this article, you might also be interested in Upgrading Ionic 2 and Angular 2 to Ionic 3 and Angular 4.
Ionic 3 Google Plus Authentication Tutorial
How to build hybrid app using Ionic 3 and Angular
Form Validation in a NativeScript Angular Mobile Application Nic shows two ways how to do a client-side validation for NativeScript forms with Angular: by using built-in Angular validators, and by writing custom directives for further validation
Create an Animated App Onboarding Process with Ionic 3

Other

Top

Web Extensions made with Angular - A tutorial about how to create a web browser extension for Firefox, Chrome, Opera or Edge by using the WebExtensions API and Angular.
Build a Music Player with Angular 2+ & Electron I : Setup & Basics Concepts - This is a three part tutorial by Chris showing you how to create a music player desktop application for Mac, Windows and Linux with Electron and Angular. There's also a part II and part III of this series.
Angular 2+ Components & Libraries A useful website that collects Angular components and libraries with different categories, e.g. UI components, code style, performance or dev tools.
Bootstrapping in the Browser with Angular Todd explores the differences between the Angular 1.x and Angular 2+ concepts to bootstrap applications.
Building a Real-time Chat with Angular 2 and deepstream A guide about using deepstream.io and Angular to build a real-time chat application.
What is Unidirectional Data Flow ? Learn How the Angular Development Mode Works, why it's important to use it and how to Troubleshoot it This is a longer, but truly interesting article explaining what exactly happens under the hood when using Angular in development mode.
Building a Canvas component with Free Hand drawing using RxJS and Angular Short but impressive tutorial by Tarik explaining how to create a canvas element that allows free hand drawings with RxJS.
Build a simple Emoji Chrome Extension with Angular CLI
Angular Architecture Paper Cards As we boot new developers into Angular we were looking for haptic ways to visualize and form an angular app as well as it’s architecture. And what’s better for that, than some cards to print out and play with
Real-World Angular Series - Part 1: MEAN Setup & Angular Architecture
Real World App - Part 12: Cloud functions for Firebase
How To Read QR Codes In Angular?
TIL: Importing Lodash into Angular, the better way
Using Google Tag Manager with Angular 4

Angular Material

Top

Custom Themes With Angular Material In this long guide Pascal explains in details how theming works with Angular Material: how to use pre-built themes, and how to create your own custom themes
The complete guide to Angular Material Themes In this article Tomas explains why you should make use of themes and how to create them with the Angular Material library

Library

Top

Top 27 Angular 2 Components for Web Developers If Angular 2 captured your heart as well, you might be interested in grabbing any of the following Angular 2 components.
Getting started on Angular 2 with Bootstrap
How to create library for Angular and publish to from scratch This is an interesting and in-depth article by Elec about what JavaScript modules are, and how you can create your own modules with Angular and publish them to npm

Projects

Top

Introducing AngularSpree – Open sourcing E-Commerce front-end application in Angular

Github

Top

Youtube

Top

AngularCamp 2016 On this YouTube playlist are the talks from AngularCamp 2016, e.g. "Angular 2 Server Side Rendering" by Wassim Chegham, "Progressive Web Apps with Angular 2" by Manfred Steyer or "Augury" by Vanessa Yuen.
ngVikings 2017 Recordings
NG-NL 2017 This is a playlist with talks from NG-NL 2017, which happened in March. Make sure to watch them all :)
Angular Advanced - A Video List About Several Advanced Angular Topics