A guide to content projection using ng-template

Source Code 🧪 | Live Example 🦠

There are many great articles regarding how Content Projection works, and all the ways you can achieve it to create reusable components in Angular.

This article is more subjective, we’ll look at reducing the “surface area” of our toolbox. — We’ll opt to use ng-template and ngTemplateOutlet for all things content projection.

Style - Filtering our knowledge and honing specific skills / patterns

Referring to the Angular docs, we have three situations within content projection we may want to achieve.


Notes on RxJS Filter Operator

Source Code: Github 🚀 | Live Examples & Snippets 🚀

Article Goal 🎯

Leveraging the RxJS Filter Operator. Use a consistent declarative programming paradigm, to potentially improve code clarity and readability.

Key Concepts 📝


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

Source Code: StackBlitz 🚀

Article Goal: Learn basic Angular concepts and strategies for keeping components simple by building a Progress Bar.

What We’ll Learn:

Progress Bar

Let’s create a simple progress bar. The snippets below may abstract away details to highlight the context of what we’re discussing. See the source code for the complete example.


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

Source Code: StackBlitz 🚀

Article Goal: Learn about common patterns we can potentially refactor in our Angular applications

Article Topics (What We’ll Learn)

Refactoring is a technique for improving the design of existing code while preserving it’s behavior. This article focuses on concrete examples of refactoring and not so much how to refactor conceptually.

Code design can be subjective, and these examples can lean towards personal preference. We will change the design but not the underlying functionality…


Mastering the Fundamentals of Angular Template Syntax: Part 2

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Source Code: StackBlitz 🚀

Article Goal: Learn about Angular’s NgClass & NgStyle Directives.

Article Topics (What We’ll Learn):

Overview

NgClass & NgStyle are Angular Directives that allow…


Angular @HostBinding with CSS Grid

Introduction

Source Code / Live Demo: StackBlitz 🚀

Article Goal: Investigate one way to dynamically modify CSS Grid Properties using Angular’s @HostBinding Decorator.

Article Topics:


Mastering the Fundamentals of Angular Template Language: Part 1

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Getting Started

Complexity: [Beginner, Intermediate, Advanced, Expert]

Source Code: StackBlitz🚀

Article Goal: Streamline information from experience and the Angular Documentation to aid in understanding Angular Template Syntax — Utilizing cheat-sheets, code-examples, and focusing on the essentials.

Article Topics (What We’ll Learn):

Angular Template Language (ATL)

Angular Template Language is the language used when…


Working with the Angular Router

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

The Angular-Router interprets browser URLs as instructions to navigate from one client-generated view to the next. We will illustrate common Angular-Router concepts and patterns to simplify working with it as a developer.

I built a Mock-Twitter application in Angular to demonstrate these concepts in a semi-real world application. For a comprehensive introduction, see the router documentation.

Live Demo 🌌

Download the Source Code 🚀


Build a Blog with Angular and Contentful

I have built a blog application using Angular and a headless CMS, Contentful. Contentful gives developers and non-developers alike the ability to manage content in a web application. I use Contentful to manage content on my website. — I am not sponsored by Contentful and any headless CMS could be substituted. See alternatives [1]

Live Demo 🌌

Download the Source Code 🚀

App Overview

Summary

What is a Headless CMS

As I learned to build web applications, I heard about Content Management Systems (CMS), such as Wordpress or Drupal. I thought to myself, why would…


Using the Angular 8 CLI

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Introduction

This article will illustrate how to improve start-up performance using Web Workers. Our example will be an Angular 8 application. Using the Angular 8 CLI simplifies getting started with Web Workers. However, using Web Workers is not specific to Angular and most of these concepts can be utilized in any Javascript or Typescript application.

Download the Source Code 🚀

We will cover

Erxk

Writes about Angular. Jiu-Jitsu Practitioner. Creator of Yami Flashcards: yami-flashcards.dev

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