:doodle { @grid: 1x35 / 100% 10rem; } @keyframes slide-in { 0% { transform: translateY(-100%); } 100% { transform: traslateY(0); } } :hover { opacity: 1; } transition: opacity .2s ease-out; animation: slide-in .25s ease-out; opacity: @pick(0.05, 0.1, 0.2, 0.3, 0.4); background: @pick(var(--yellow1), var(--yellow2), var(--yellow3), var(--green1), var(--green2), var(--green3)); height: @rand(15%, 100%); margin: 0 .2rem;
angular logo

Posts About Angular

💪 Top Posts

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

Build stylish maps in Angular using Leaflet, a JavaScript library that makes it easy to create dynamic and mobile-friendly 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.

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.

🕵 Search Results

🔎 Searching...