Angular — Four practical use cases of NgTemplateOutlet

5 min readApr 25, 2021

--

NgTemplateOutlet is one of the most overlooked features in Angular. In fact, it is designed to cater some very specific scenario that alternative is hardly found. It can highly improve the code quality when used correctly. Here I have summarized four practical use cases of NgTemplateOutlet that can fit in many projects.

Image from Evolution SKF

1. Create reusable HTML blocks

Liu Ting Chun

Written by Liu Ting Chun

Web developer from Hong Kong. Most interested in Angular and Vue. Currently working on a Nuxt.js + NestJS project.

More from Liu Ting Chun

Liu Ting Chun

Angular — Introduction to named router outlet and a hack for custom URL

This is an introduction to named router outlet, which is a very less known feature that is capable to tackle some complicate use cases.

6 min readOct 1, 2020

--

Liu Ting Chun

Angular — Four Ways for Communication Between Components

An Angular application is consisted of many smaller components. Here is an introduction to four ways of communication between components.

4 min readJul 15, 2020

--

Liu Ting Chun

Angular — An extremely simple and easy implementation of drag and drop list reordering

Drag and drop list reordering is a very common feature of webpages with lists of data. Here is an implementation without using library.

4 min readApr 20, 2021

--

Liu Ting Chun

Angular — Why you should (and how to) avoid Function.prototype.bind in template

Function.prototype.bind is a potential performance killer when it is used inside an Angular template. Here is how you can avoid that.

3 min readOct 27, 2020

--

See all from Liu Ting Chun

Recommended from Medium

Guillaume Ferber

Why you should start learning Angular in 2023

Level up your web development game in 2023 with Angular — the dynamic JavaScript framework that’s redefining the way modern apps are built.

7 min readMar 23

--

Alberto García Ibáñez

Angular tricks to become a pro

Below you can find some useful tools and tricks to boost your Angular applications! The second part of this post is here:

3 min readJan 13

--

Lists

Stories to Help You Grow as a Software Developer

19 stories70 saves

Leadership

30 stories29 saves

Good Product Thinking

11 stories77 saves

Stories to Help You Level-Up at Work

19 stories53 saves

Kagklis Vasileios
in
JavaScript in Plain English

10 Things You Should Know About Zone.js in Angular

What is Zone.js? How Angular uses it? This Q&A guide will answer these questions and more.

5 min readJan 17

--

AngularEnthusiast
in
Geek Culture

Angular: How a Directive when applied to the Parent Element can access the Child Elements as well

This is a very common use-case when you have applied the Directive to an Element A to perform some action, but this action requires the…

4 min readDec 30, 2022

--

Itzhak

Angular | Performance optimization

Angular is a powerful front-end framework that can help developers build highly performant web applications. However, as applications grow…

5 min readFeb 18

--

William Bastidas
in
williambastidasblog

Most Common Design Patterns in Angular: What They Are and How to Apply Them

Imagine building a house without a blueprint. It would be chaotic, confusing, and there’s a high chance that things wouldn’t turn out the…

15 min readFeb 2

--

See more recommendations

Help
Status
Writers
Blog
Careers
Privacy
Terms
About
Text to speech