💪 Top Posts
Introduction to Angular's HttpClient
New with Angular 4.3, HttpClient replaces the standard Http library and brings some great new features.
Reactive Forms in Angular: An Introduction
Learn the basics of building forms in Angular in an explicit way directly in your component classes with reactive forms.
Getting Started With Angular Material 2
The simple steps to setup Material Design components in your Angular 2+ apps.
— Sorry to interrupt this program! 📺
If you're interested in learning Angular in a comprehensive and structured way, I highly recommend you check out ng-book. Learning from an organized and up-to-date resource like that should speed up your learning quite a bit.
Plus, this is an affiliate link, so if you purchase the course you help Alligator.io continue to exist at the same time! 🙏
Component Communication in Angular
Overview of the 3 mains ways to pass some data in between components in Angular: via the Angular router, via inputs and outputs or via services and observables.
Custom Form Validation in Angular
In this post we'll go over how to create a custom validator in Angular for both template-driven and reactive forms.
Building Maps in Angular using Leaflet, Part 4: The Shape Service
In this post you'll learn how to use Leaflet with Angular to generate shapes on a dynamic and mobile-friendly map.
Building Maps in Angular using Leaflet, Part 3: The Popup Service
Build stylish maps in Angular using Leaflet
Building Maps in Angular using Leaflet, Part 2: The Marker Service
In this second part of a series on adding a mobile-friendly map to your Angular apps using Leaftlet, we go over how to add a map marker service.
Building Maps in Angular Using Leaflet, Part 1: Generating Maps
Using Angular CLI Schematics
Learn how to augment your Angular app development using Angular Schematics at the CLI.
Infinite Scroll in Angular Using the CDK
Learn how to implement an infinitely scrolling page in Angular with the help of the official Component Dev Kit (CDK).
Angular MVC - A Primer
This tutorial shows how the Model-View-Controller pattern is achieved (in an MVVM way) in Angular. sponsored
Angular 8: Upgrading & Summary of New Features
Here's what's new in Angular 8 that'll make your app's performance and developing experience better. I'll also cover how to upgrade from Angular 7.
Intro to Progressive Web Apps (PWAs) in Angular
Learn how to add service workers to your Angular applications and make them into Progressive Web Apps (PWAs).
Angular Developer Roadmap for 2019
Interested in being an Angular developer in 2019? This roadmap will point your to step by step resources in order to do just that.
Angular: Performance Analysis with webpack Bundle Analyzer
Here's how to use the webpack-bundle-analyzer tool to visualize the final bundle of a built Angular app to see where the bulk of the code comes from.
Angular CLI: Custom webpack Config
Want more flexibility with webpack configuration for your Angular apps? This article covers how to create a custom webpack config inside an Angular project.
Continuous Deployment with Angular, Travis CI and Firebase Hosting
When it comes time to deploy an Angular app to production, Firebase hosting is a great option. Plus, you can add Travis CI on top to automate the builds!
How to use Internationalization (i18n) in Angular
Here's an article on how to make use of the built-in internationalization (i18n) features in Angular 7+.
Internationalize Your Angular App with ngx-translate
Here's a guide on how to use the ngx-translate library to internationalize (i18n) your Angular apps with ease.
Integrating Google Maps in Your Angular Application
Low how to quickly add a Google Maps component to your Angular application with Angular Google Maps.
Manage State in Angular with NGXS
Here's an introduction to State Management in Angular using the NGXS state management library.
An Intro to Drag & Drop in Angular Using the CDK
A short post where we show you how to implement Drag & Drop functionality in an Angular app using the CDK.
Server Side Rendering with Angular Universal
Here's a short post about what you need to know about SSR (Server Side Rendering) with Angular Universal.
Create a Real-Time App with Socket.IO, Angular, and Node.js
Learn how to build a real-time document collaboration app using Angular and the Socket.IO realtime application framework.
Angular Console: Simplifying the Angular CLI Experience
Create and manage Angular projects using Angular Console by Nrwl, which gives you a GUI on top of the Angular CLI.
Angular 7: Upgrading & Summary of New Features
Exploring what's new with Angular 7 and how to go about upgrading your apps from Angular 6 to Angular 7.
Angular Component Inheritance
Learn how to use the power of inheritance to extend your Angular components with common functionality.
Getting Started with Angular and Electron
Learn how to setup an Angular project to build with Electron and create a desktop application.
Angular 6: Upgrading & Summary of New Features
Exploring what's new with the Angular 6 release and the steps needed to update an Angular 5.x app over to Angular 6.
Detecting Breakpoints Using the Angular CDK
Detect viewport size changes or matches against media queries using the BreakpointObserver and MediaMatcher services from the Angular CDK.
How to Use Custom SVG Icons in Angular Material
A quick guide on how to use your own SVG icons with Angular Material 2.
Introduction to Using Storybook for Angular
Storybook is a tool that allows you to easily document and visualize your app's components in a flat hierarchy. See how you can make use of it in an Angular app.
Integrating Algolia InstantSearch with Angular
Learn how to interface your Angular 4+ app with an Algolia index using the Angular InstantSearch widgets.
Unique Field Validation in Angular for Create and Update Operations
Unique field validation when using the same reactive form for creating and editing in Angular.
Testing Angular Http Interceptors
Angular HttpInterceptors can be used to modify Http requests, this article looks at testing these implementations.
Easy Reactive Forms in Angular Using Formly
Formly is a package that let's us create reactive forms in Angular with a simple JSON object. Let's see how it can be used.
GraphQL Subscriptions in Angular using Apollo 2.0
A quick look at implementing GraphQL subscriptions in an Angular 2+ app using the Apollo 2.0 client.
Angular Service Worker: Dealing With Updates
The @angular/service-worker package comes with a SwUpdate class that makes it easy to deal with updated apps. Let's see how it can be used.
Using webpack Bundle Analyzer or source-map-explorer to Analyze an Angular App’s Bundle Size
Here are two easy ways to analyze the bundle size and composition of an Angular 2+ app's production build.
Getting & Setting HTML Meta Tags in Angular
A quick rundown of the Angular 4+ Meta service, which makes it easy to get and set various meta tags on a route.
Service Workers in Angular With @angular/service-worker
An introduction to using the @angular/service-worker package to turn an Angular app into a Progressive Web App (PWA).
Authentication in Angular Using Auth0 & Auth0 Lock
A quick tour of using Auth0, the Auth0 lock widget and JSON Web Tokens (JWTs) to implement authentication in Angular.
E2E Testing Angular Applications with TestCafe
Using TestCafe, an Open Source Node.js tool, for end-to-end (E2E) testing Angular 2+ Applications.
Declarative Title Updater with Angular and ngrx
Use @ngrx/router-store with a custom RouterStateSerializer, @ngrx/effects, and Angular's Title service to update the HTMLTitleElement based on route data.
Integrating Stripe in Angular With Stripe Elements
A guide on integrating Stripe in an Angular app using template-driven forms and Stripe Elements for a customized checkout process.
Angular 5: Upgrading & Summary of New Features
Let's go over the new additions in Angular 5. Plus, a quick guide with pointers on upgrading your Angular 4 apps to Angular 5.
Using @ngrx/entity in Angular to Simplify Store Reducers
Let's build a simple Angular 4 todo app and make use of @ngrx/store as well as the new @ngrx/entity to simplify our reducer.
Testing HttpClient Requests in Angular
Learn how to write simple unit tests for your app's http requests using Angular's new HttpClient and its testing utilities.
Animating Route Changes in Angular
Angular's powerful animation engine allows flexibility to do things such as animating the transition between routes. Here we go over how its done.
Getting Started With PrimeNG in Angular
A quick post to get your up and running with the PrimeNG UI component library for your Angular 4+ projects.
Using Cloud Firestore in Angular With AngularFire
Learn how to interface with the new Cloud Firestore database in Angular 2+ using the AngularFire2 library.
Angular Router: Route Resolvers
Using a route resolver is an easy way to fetch data before navigating to a route to have the data available immediately when the new route loads.
Using Custom Elements in Angular
It's easy to integrate Web Components into your Angular projects and in this post we'll go over the few things to know for a seamless integration.
Using Chart.js in Angular With ng2-charts
Looking for an easy way to integrate charts in your Angular 2+ apps? ng2-charts makes that possible.
Defining Providers in Shared Modules in Angular
A quick tip on using a static forRoot method in feature modules to allow us to provide a service only once, even when a module gets imported by other lazy-loaded modules.
Using Renderer2 in Angular
Learn how to use methods from Angular's Renderer2 service to abstract your DOM manipulations.
A Reference for Angular Templates
A breakdown and quick reference of Angular's syntax for templates.
Quick Introduction to Template-Driven Forms in Angular
An introduction to using template-driven forms to define and work with simple forms in Angular 2+.
Anatomy of an Angular Module
Here's an overview of NgModules in Angular 2+ and what goes into the imports, exports, declarations, providers...
Using ControlValueAccessor to Create Custom Form Controls in Angular
Implement the ControlValueAccessor interface to seamlessly integrate custom form controls into your forms.
Angular HttpClient: Interceptors
A quick post explaining how to use interceptors in Angular 4.3+ to act on http requests.
Angular Testing: async and fakeAsync
Learn how to test asynchronous code more easily using the async and fakeAsync utilities for Angular 2+.
Custom Async Validators in Angular
How to create custom async validators for reactive forms in Angular that check for validity on the backend.
Resizing Images in the Browser in Angular With ng2-img-max
Limit the size of uploaded images directly on the browser in your Angular 2+ apps using the ng2-img-max module.
Angular: Error Tracking Using Sentry
Learn how to setup Sentry in your Angular 2+ apps for error tracking in production.
Scoping Your Styles in Angular With ViewEncapsulation
Understand the 3 possible values for ViewEncapsulation in Angular 2+: Emulated, Native and None.
Environment Variables in Angular
Learn how to set environment variables in your Angular 2+ apps and how to add new environments using the Angular CLI.
Creating Reusable Components with NgTemplateOutlet in Angular
Learn how to use NgTemplateOutlet and structural directives to make more general reusable components.
Angular: The ng-container Element
ng-container can be used as the host for structural directives like ngIf or ngFor, and it to reduce the amount of extra host DOM elements.
Basic Firebase CRUD Operations in Angular With AngularFire2
In this quick post you'll see how to perform basic CRUD operations on a Firebase database instance in your Angular 2+ apps.
Using the Redux DevTools with ngrx/store
The DevTools extension is one of the many reasons why Redux state management is so powerful. So how the extension can be used in an ngrx/store project.
Angular Testing: Using Spies
Learn how to spy on a component's service dependency to stub values or ensure that the service's methods are called.
Introduction to Unit Testing in Angular
A quick and simple introduction to writing your first unit tests for Angular using Jasmine and Karma.
Firebase Authentication in Angular with AngularFire2
An easy step-by-step guide on adding a signup and authentication workflow in Angular 2+ apps using Firebase and the AngularFire2 library.
Angular Router: Query Parameters
Add optional parameters to your routes in Angular 2+ apps with query parameters.
Drag & Drop in Your Angular Apps With ng2-dragula
ng2-dragula is an Angular 2+ wrapper for the popular Dragula drag and drop library. Here's how to use it.
Using the takeUntil RxJS Operator to Manage Subscriptions Declaratively
See how the takeUntil operator can make it much easier to unsubscribe from observables when your Angular components are destroyed.
Getting Started With ngrx for Redux-Style State Management in Angular
Let's build a simple todo app that shows how to use ngrx/store in Angular 2+ apps to have a single immutable state tree.
Using Bootstrap in Your Angular Apps with ng-bootstrap
ng-bootstrap gives us a set of components and directives to use Bootstrap in Angular 4+ apps.
Angular Router: Using Route Guards
Learn how to use routing guards in Angular to control accessing or leaving specific components.
Using @HostBinding and @HostListener in Custom Angular Directives
The HostBinding and HostListener decorators let you set properties or listen for events on a directive's host.
Managing Subscriptions in Angular With the Async Pipe
Easily subscribe, unwrap data and unsubscribe from observables in Angular 2+ with the use of the async pipe in your templates.
Understanding Change Detection Strategy in Angular
See how you can improve the performance of your Angular 2+ apps with an OnPush change detection strategy.
Angular Quick Tip: Binding Specific Keys to the Keyup and Keydown Events
A shortcut way to trigger events only when certain keys are pressed by adding the key name(s) with the keydown or keyup event names.
Angular Router: Navigation Using RouterLink, Navigate or NavigateByUrl
Some examples of using the RouterLink directive as well as the imperative Router.navigate or Router.navigateByUrl to navigate in your app.
Angular Router: Defining Child Routes
See how to easily define a routing hierarchy using child routes with the Angular router.
Using ViewChild in Angular to Access a Child Component, Directive or DOM Element
The ViewChild decorator makes it easy to access a child component from the template, a directive or even a DOM element directly.
Preloading in Angular
Along with lazy loading, preloading is a strategy that can be used to speed up you're apps initial loading time and bundle size.
Lazy Loading Routes in Angular
Here's a simple step-by-step guide to enable feature modules to be lazy loaded in Angular, allowing to load the code for some routes to be loaded on-demand.
Using Angular's Location Service
The common package in Angular 2+ has a Location service that allows to interact with the current browser path.
Getting Started With GraphQL in Angular with Apollo
A quick post with the basic setup to use GrahQL in your Angular 2+ apps with the Apollo client.
Reactive Forms in Angular: Listening for Changes
Listen for change events in your reactive forms by subscribing to the valueChanges observable.
Using Custom Pipes in a Component Class in Angular
Avoid code duplication by using your custom Angular pipes in your templates as well as your component classes.
Reactive Forms in Angular: Dynamically Creating Form Fields With FormArray
Learn how you can duplicate form fields with model-driven forms in Angular.
Quick Angular CLI Reference
A quick post to help you master the Angular CLI and use it to its full capacity.
Angular Material: Creating a Custom Theme
Here's how to customize the colors used by Angular Material components.
Reactive Forms in Angular: Creating a Custom Validator
It's easy to create your own validator functions when working with reactive forms in Angular. See how it's done in this post.
New Features for ngIf Starting with Angular 4
The built-in ngIf directive is getting a major boost with Angular 4. Learn what's new.
Creating a Custom Loading Screen in Angular
Easily change the look and content of the loading message in your Angular apps.
Dialogs With Angular Material
See how to implement dialogs in your Angular apps with Angular Material.
Lifecycle Hooks in Angular
A gentle introduction to the different component lifecycle hooks available with Angular.
Animation Callbacks in Angular
Learn how you can hook into the start or end of animations in Angular and call your own methods.
Flex Layout for Angular
Flex Layout is a component engine for Flexbox layouts in Angular. Learn how to use it to easily create your page layouts.
Deploying an Angular App to Github Pages
Using the Angular CLI and the angular-cli-ghpages node module to deploy an Angular 2+ app to Github pages.
Building Custom Directives in Angular
A quick post that shows how to create new directives in Angular.
Angular Material 2 Quick Reference
A reference with the currently available material design components for Angular 2.
Augury Chrome DevTools Extension for Angular
Augury is a Chrome DevTools extension that makes it very easy to debug your Angular 2+ apps.
Component Interaction With Outputs in Angular
Use Outputs in a child component to emit events to the parent component.
Component Interaction With Inputs in Angular
Use Inputs in a child component to get data from the parent component.
innerHTML Property Binding in Angular
Bind strings that contain html markup with the innerHTML binding in your Angular templates.
Using Third-Party Libraries in Angular Apps
See how to easily add third-party libraries like Lodash or jQuery to an Angular 2+ project.
Built-in Pipes in Angular
Learn about the built-in pipes available in Angular 2+: async, currency, decimal, date, json, percent, slide, lowercase & uppercase.
Building a Real Time Search in Angular With RxJS
Building a simple real time search in Angular 2+ with observables and RxJs.
Introduction to Animations in Angular
Define custom and very fine-grained animations in your components in Angular 2 or Angular 4.
Styles Between Components in Angular 2+
With modularity & the shadow DOM, component styles don't bleed into other components. Where needed though, there are ways to have style interaction.
Class Binding & NgClass in Angular 2
Learn how to bind classes in your Angular 2 templates.
Style Binding & NgStyle in Angular 2
Learn how to bind inline styles in your Angular 2 templates.
Architecture of a Basic Angular App
Visualize the building blocks of a basic app created with the Angular CLI.
Providers in Angular
Learn how to provide your providers in Angular 2+.
NgSwitch Directive in Angular
Learn about the built-in ngSwitch directive in Angular 2+.
Introduction to Routing in Angular
Learn how to get some routes going in your Angular 2+ apps.
Dependency Injection in Angular
See how dependency injection for a service is done in Angular 2+.
Data Binding in Angular
Control the data flow in your Angular 2+ applications with data binding.
*ngIf Directive in Angular 2
Learn about the built-in ngIf directive in Angular 2+.
*ngFor Directive in Angular
Learn about the built-in ngFor directive in Angular 2+.
Creating Custom Pipes in Angular
A short primer on creating your own pipes to use in your templates in Angular 2+.
Deploying an Angular App to Firebase Hosting
The simple steps by steps to deploying an Angular 2+ app to production on Firebase Hosting.
Content Projection in Angular with ng-content
Similar to transclusion in Angular 1, content projection is the Angular 2+ way to include markup and content inside a component from the outside.
Using the Angular CLI to Get Up and Running With Angular
Learn about the Angular 2 and Angular 4 command line interface and get your projects running in just a few commands.