Angular hub is a collection of articles, useful links, tutorials and videos about Angular. See also list with topic title .
Handling Route Parameters in Angular v2+ (Chris Sevilleja)- Lazy Loading in Angular v2+ (Chris Sevilleja)
- Protecting Angular v2+ Routes with CanActivate/CanActivateChild Guards (Chris Sevilleja)
- The Angular HTTP Client - Quickstart Guide
- Using NgRx 4 to Manage State in Angular Applications
- Authentication in Angular & JWT
- Listening for Actions in @ngrx/store
Username Availability with an Asynchronous Validator in Angular- Dynamic View Model with @ngrx/store
- Writing AoT-friendly applications
- Angular: Bad Practices
- Here is why you will not find components inside Angular
- Angular CLI and OS Environment Variables
- Angular Service Workers
- Common mistakes with Angular Universal
- Create an Animated App Onboarding Process with Ionic 3
- PWAs with Angular: Being Reliable
- Real-World Angular Series - Part 1: MEAN Setup & Angular Architecture
- Converting your Angular CLI application into a NPM Module: Part Two
- Creating Stagger Animations in Angular 4
- Angular ng-content and Content Projection: A Complete Guide - How To Use ng-content To Improve Component API Design
- The mechanics of DOM updates in AngularAngular 2 Best Practices: Change Detector Performance
- 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 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
Show a loading indicator in Angular using ngIf/else, the as keyword and the async pipe- Magic Of Dependency Injection in Angular
- Angular Testing: Using Spies
- Introduction to Unit Testing in Angular
- How To Read QR Codes In Angular?
- [How to make MultiLingual web applications in Angular](How to make MultiLingual web applications in Angular)
- Building an Angular Video Player with Videogular
- Learn Several Angular Advanced Features - ng-template, ng-container and ngTemplateOutle
- Leverage Structural Directives to Create Powerful Components in Angular
- An Angular 2 Webpack setup for development and production
- 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.
- 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.
- 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 can we default to a route in Angular?
- Learn Angular Template References And How To Configure a Component With Partial Templates
- Animated slide panel with Angular
- Angular Router: Query Parameters
- Angular Build with Webpack and Babili
- Angular Advanced - A Video List About Several Advanced Angular Topics
- How to Integrate reCAPTCHA in your Angular Forms
- Angular and RxJS: Create an API Service to Talk to a REST Backend
- 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
- 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
- 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.
- Introducing AngularSpree – Open sourcing E-Commerce front-end application in Angular
- Learn The Angular Host Context CSS Selector, See the CLI SAAS integration In Action
- How to use a service inside another service in Angular 2?
- Querying a Normalized State with RxJS in Angular
- Drag & Drop in Your Angular Apps With ng2-dragula
- Reactive apps with Angular & ngrx
- Create directive for showing error message in form with Angular
- Here is what you need to know about dynamic components in Angular
- Converting your Angular CLI application into a NPM Module
- 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.
- 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
- Getting started on Angular 2 with Bootstrap
- How to build hybrid app using Ionic 3 and Angular
- Highlight Text Within a String Using Angular and Regular Expressions
- Using the takeUntil RxJS Operator to Manage Subscriptions Declaratively
- Angular Guards: More than Security
- Angular 4: Enhancing your Templates With 'else' & 'as'
- 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
- How do Protractor and Angular synchronize?
- Angular Production Builds
- How to create library for Angular and publish to npm 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
- 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
- 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.
- Create the toJSON operator in Angular
- Angular Components and Directives - a Beginner-Friendly Introduction: Learn How To Extend The Browser And Build Your Own HTML Tags
- Component API Design - How To Make Simpler and More Reusable Components Using ng-content
- Implementing Auth Guard with Componentless Route in Angular
- Setting Default Headers in Angular
- Building Material Themed Components
- NgUpgrade in Depth
In this long article Victor explains everything you need to know about the mechanics of the NgUpgrade library.
- 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.
- 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.
- Angular Router: Defining Child Routes
- Angular Singleton Service and a Loading Indicator
- Understanding Change Detection Strategy in Angular
- angular-tslint-rules: a configuration preset for both TSLint & codelyzer
- Angular Model Pattern
- Single-Page Applications with Angular 2 and ASP.NET Core
- 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.
- Component architecture recipes for Angular’s reactive forms
In this long article Todd shares some patterns for using a component architecture with reactive forms.
- 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.
- Using Import = Require Syntax With TypeScript 2.2 In Angular 2.4.9
- Implementing a Meta-Reducer in ngrx/store
- How to create (and use) custom components with Angular 2
- Creating and Maintaining Documentation
- NgUpgrade with Lazy Loading
- Ionic 3 Google Plus Authentication Tutorial
- 3 Types of Route Loading in Angular, Explained In 500ish words
- Custom Preloading and Lazy Loading Strategies with Angular
- How to Really use NgRX
- 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.
- A Taste From The New Angular HTTP Client
- Create A Photo Gallery With Angular 4
- Create A Photo Gallery With Angular 4
- The mechanics of property bindings update in Angular
- 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
- Lazy Loading in Angular
- Preloading in Angular
- The Ultimate Angular CLI Reference Guide
- Angular 2/4 - Router Animation Tutorial & Example
- Build a simple Emoji Chrome Extension with Angular CLI
- Removing Roadblocks in the Move to Angular 4
- Unit Test Your ngrx/effects in Angular
- 7 Angular Tools That You Should Consider
- Reusing ngrx/effects in Angular (communicating between reducers)
- 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.
- 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.
- 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.
- 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
- Angular Filter Checkboxes
A quick tutorial about using checkboxes to filter lists.
- 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.
- Implementing Event Modifiers in Angular
In this article Netanel shows how he implemented Event modifiers, a feature from the Vue library, in Angular.
- When to Unsubscribe in Angular
- What I have learned using ngrx/Redux with Angular
- Understanding Angular modules (NgModule) and their scopes
The article explains what NgModules are, when you should import NgModules, and how to manage SharedModules.
- 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.
- Angular 2 with Array.include and Object.entries
A quick tip on how to use Array.include and Object.entries in your Angular
- 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.
- 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.
- 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.
- Using Pipes in Angular
Burke compares how to use built-in and custom pipes in Angular 1.x and Angular 2+.
- 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".
- Exploring The New Meta Service in Angular Version 4
- 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.
- Testing Angular Faster With Jest
Michal shows how to use Jest and Jasmine for unit testing your Angular application, instead of Karma and Jasmine.
- NgIf Else lands in Angular 2.x+/4.0
- 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.
- 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.
- 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.
- Handling Multiple Checkboxes in Angular Forms
A quick tutorial about how to render a list with multiple checkboxes by using reactive forms.
- 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.
- Wrap any jQuery plugin with Angular component — case study
Michal explains how to wrap the slick-carousel jQuery plugin into an Angular component.
- 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+).
- Create an hierarchical style architecture
A short article about creating a better SCSS architecture by using the /deep/ selector.
- 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.
- Building maintainable Angular applications
Kwinten describes how he created a custom decorator that retries to call the backend, if a call failed.
- 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.
- 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.
- 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.
- 5 Features To Watch Out For in Angular v4
- 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 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.
- NG-NL 2017
This is a playlist with talks from NG-NL 2017, which happened in March. Make sure to watch them all :)
- 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.
- 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.
- Event Emitters in Angular
Netanel takes a look at component communication and event emitters in an Angular application that uses RxJS.
- 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+.
- 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.
- Angular File Uploads with an Express Backend
Ogundipe shows two ways to create an app to upload files: one by using ng2-file-upload package, and one without using any plugins.
- Angular constructor versus ngOnInit
And here's another short article that explains the differences between the ngOnInit lifecycle hook and the constructor method.
- 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.
- 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.
- 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.
- From transclusion to content projection
Juri compares the concepts behind transclusion in Angular 1.x with the content projection mechanisms of Angular 2+.
- Angular-cli and Global SASS Variables
A quick tip about how to use global SASS variables in your Angular component.
- 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.
- 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.
- Testing Routes in Angular 2
A detailed tutorial about how to test your application's routes with Angular.
- 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.
- Angular Forms in Depth
This is a long, in-depth article about forms, covering the FormsModule and the ReactiveFormsModule.
- From Redux to Angular ngrx/store
Julien shows how to migrate your application from using Redux to using ngrx/store.
- 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.
- 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.
- Sorting with Pipes in Angular
A quick tutorial showing how to create a custom pipe for sorting tables.
- 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.
- 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.
- 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.
- Advanced Styling Guide (v4+)
Gerard shows different options to style Angular components and directives.
- 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.
- Testing services with http in angular
- Custom SnackBar using Angular2/Material
Learn how to extend the official Material Design SnackBar to create a custom SnackBar with different styles and behavior.
- 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 Continuous Integration Interesting slides for Raúl's talk at ngVikings 2017 about continuous integration with Angular and Travis CI.
- Using Yarn with Angular CLI
- 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.
- 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.
- Typescript 2 Type System Top 3 Key Concepts - Angular University
- 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.
- Avoid Zombie Subscribers in Angular
A quick 6-minutes tip by Sean about avoiding zombie listeners with the use of a @once decorator.
- Real World Angular — Form Formation
This is the third part of an article series showing you how to accept, validate and save data with reactive forms.
- 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.
- 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.
- 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.
- 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 element and composes the view.
- 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.
- 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.
- 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.