Sign in

A guide to content projection using ng-template

Style - Filtering our knowledge and honing specific skills / patterns
  • Single Slot: A single source of content
  • Multi Slot: Multiple sources of content

Notes on RxJS Filter Operator

Article Goal 🎯

Key Concepts 📝

Learn Angular & RxJS Concepts by Building a Simple Progress Bar Component

  • Using Inputs & Outputs that keep our component simple and flexible
  • Angular @ViewChild() and Renderer2 to safely modify DOM Elements
  • Refactoring to simplify our component code
  • Unwrapping a stream of values from an RxJS observable to our component using the Angular async pipe.

Progress Bar

Common patterns, tips & tricks, for refactoring our Angular applications

  • Replacing component “wrappers” with :host/HostBinding/HostListener
  • Replacing BehaviorSubject.getValue() usages with more declarative techniques.
  • Replacing a Component that does everything into Container & Presentational Components

  • Discuss the Syntax and Semantics of NgClass & NgStyle
  • Explore the Angular Source Code and see how NgClass & NgStyle work under the hood
  • Use custom examples and cheat sheets to develop a better understanding of how to use NgClass and NgStyle


Angular @HostBinding with CSS Grid


  • Use CSS-Grid with Angular Components by leveraging the :host selector
  • How to adjust CSS Grid Properties such as column-template-rows and gap with TypeScript dynamically.
  • Angular’s DOM Sanitizer, why we have to bypass security and some guidelines we should follow when doing so.

Getting Started

  • Expressions & Statements: Guidelines, Rules, and Usages
  • Properties & Attributes: How they relate to Data Binding
  • Data Binding: Dynamically generating views

Angular Template Language (ATL)

Working with the Angular Router

Build a Blog with Angular and Contentful

App Overview


  • What is a Headless CMS
  • Contentful Basics
  • Angular: Accessing & Displaying Content
  • Hosting

What is a Headless CMS

Using the Angular 8 CLI


  • Measuring Performance in Lighthouse
  • Getting Started with Web Workers in Angular 8 [1]
  • Measuring Performance…


Writes about Angular. Jiu-Jitsu Practitioner. Software Engineer at Cisco. — Thoughts are my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store