Angular hub is a collection of articles, useful links, tutorials and videos about Angular. See also weekly categorized content.
- General
- Directives
- Templates
- Class/Styling
- Forms
- Pipes
- Services
- Routing
- Rxjs
- State Management
- Components
- Content Projection
- Events
- Dependency Injection
- DOM Manipulation
- Animation
- Performance
- Authentication
- Production/Deployment
- Typescript
- Compiler
- Testing
- Tooling
- Backend
- Desktop
- Mobile
- Material Design
- Library
- Other
- Projects
- Github
- Video List
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
- 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.
- 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.
- 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
- 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)
- 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+.
- 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
- 3 Types of Route Loading in Angular, Explained In 500ish words
- Angular Router: Defining Child Routes
- Implementing Auth Guard with Componentless Route in Angular
- Angular Guards: More than Security
- How can we default to a route in Angular?
- Angular Router: Query Parameters
- Resolving route data in Angular
- 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
- 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
- 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
- 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
- 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.
- Magic Of Dependency Injection in Angular
- Mastering Angular dependency injection with @Inject, @Injectable, tokens and providers
- 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
- 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
- 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.
- 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
- 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 2 Type System Top 3 Key Concepts - Angular University
- Using Import = Require Syntax With TypeScript 2.2 In Angular 2.4.9
- 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.
-
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
- 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
- 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.
- 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.
- 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
- 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
- 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
- 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
- Ultra-fast bootstrapping with Angular 4 and Electron (Typescript + SASS + Hot Reload)
- auth0-angular-samples
- 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