Directives | Playful Programming

In our last chapter, we talked about how you can create custom logic that is not associated with any particular component but can be used by said components to extend its logic.

This is helpful for sharing logic between components, but isn't the whole story of code reuse within React, Angular, and Vue.

For example, we may want logic associated with a given DOM node without having to create an entire component specifically for that purpose. This exact problem is what a Directive aims to solve.

What Is a Directive

Our "Introduction to Components" chapter mentioned how a component is a collection of structures, styling, and logic that's associated with one or more HTML nodes.

Conversely, a directive is a collection of JavaScript logic that you can apply to a single DOM element.

While this comparison between a directive and a component seems stark, think about it: Components have a collection of JavaScript logic that's applied to a single "virtual" element.

As a result, some frameworks, like Angular, take this comparison literally and use directives under the hood to create components.

Here's what a basic directive looks like in each of the three frameworks:

React
Angular
Vue

React as a framework doesn't quite have the concept of directives built in.

Luckily, this doesn't mean that we, as React developers, need to be left behind. Because a React component is effectively just a JavaScript function, we can use the base concept of a directive to create shared logic for DOM nodes.

Remember from our "Element Reference" chapter that you can use a function associated with an element's ref property. We'll use this concept alongside the idea of a custom hook to create an API to add logic to an HTML element:

const useLogElement = () => {	const ref = (el) => console.log(el);	return { ref };};const App = () => {	const { ref } = useLogElement();	return <p ref={ref}>Hello, world</p>;};

React What is a Directive? - StackBlitz

import { createRoot } from "react-dom/client";const useLogElement = () => {	const ref = (el) => console.log(el);	return { ref };};const App = () => {	const { ref } = useLogElement();	return <p ref={ref}>Hello, world</p>;};createRoot(document.getElementById("root")).render(<App />);

We'll continue to cover alternative APIs in React that can do much of the same as directives in other frameworks. In the meantime, it might be beneficial to broaden your horizons and take a glance at what a "true" directive looks like in other frameworks.

You set up a directive in Angular very similarly to how you might construct a component: using the @Directive decorator.

import { Component, ElementRef, Directive } from "@angular/core";@Directive({	selector: "[sayHi]",})class LogElementDirective {	constructor() {		console.log("Hello, world!");	}}@Component({	selector: "app-root",	imports: [LogElementDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <p sayHi>Hello, world</p> `,})class AppComponent {}

Angular What is a Directive? - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	Directive,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Directive({	selector: "[sayHi]",})class LogElementDirective {	constructor() {		console.log("Hello, world!");	}}@Component({	selector: "app-root",	imports: [LogElementDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <p sayHi>Hello, world</p> `,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Here, we've told Angular to listen for any sayHi attributes (using a CSS selector) and run a console.log any time an element with said attribute is rendered.

This isn't particularly useful, but demonstrates the most minimal version of what a directive looks like.

Accessing a Directive's Underlying Element

It's frequently more helpful to get a reference to the element that the attribute is present on. To do this, we'll use Angular's dependency injection to ask Angular for an ElementRef that's present within the framework's internals when you create a directive instance.

@Directive({	selector: "[logElement]",})class LogElementDirective {	// el.nativeElement is a reference to the HTMLParagraphElement	el = inject(ElementRef);}

But oh no! Our directive no longer uses the constructor function, which means that our console.log no longer runs. While we could fix this by adding a constructor after our el:

@Directive({  selector: '[styleBackground]',})class StyleBackgroundDirective {  el = inject(ElementRef);  constructor() {	// HTMLParagraphElement	console.log(this.el.nativeElement);  }}

We can also extract our inject into a function that we can call from within our directive's class body:

function findAndLogTheElement() {	const el = inject(ElementRef);	// HTMLParagraphElement	console.log(el.nativeElement);	return el;}@Directive({	selector: "[sayHi]",	standalone: true,})class LogElementDirective {	el = findAndLogTheElement();}

React Directive El Reference - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	inject,	ElementRef,	Directive,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";function findAndLogTheElement() {	const el = inject(ElementRef);	// HTMLParagraphElement	console.log(el.nativeElement);	return el;}@Directive({	selector: "[sayHi]",})class LogElementDirective {	el = findAndLogTheElement();}@Component({	selector: "app-root",	imports: [LogElementDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <p sayHi>Hello, world</p> `,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Setting up a directive in Vue sees you create an object within our setup script.

Inside this object, we'll add a key for created and assign it a function to let Vue know to run said function when the directive is instantiated.

<!-- App.vue --><script setup>const vSayHi = {	created: () => console.log("Hello, world!"),};</script><template>	<p v-say-hi>Hello, world</p></template>

Vue What is a Directive? - StackBlitz

<!-- App.vue --><script setup>const vSayHi = {	created: () => console.log("Hello, world!"),};</script><template>	<p v-say-hi>Hello, world</p></template>

Directives in Vue must start with v- prefix (which is why our object starts with v) and are dash-cased when presented inside a template. This means that our vSayHi object directive is turned into v-say-hi when used in the template.

Accessing a Directive's Underlying Element

Instead of running a simple console.log on a string, let's use the first argument passed to our directive's created function to access the underlying HTML element:

<!-- App.vue --><script setup>const vSayHi = {	created: (el) => console.log(el),};</script><template>	<p v-say-hi>Hello, world</p></template>

Vue Directive El Reference - StackBlitz

<!-- App.vue --><script setup>const vSayHi = {	created: (el) => console.log(el),};</script><template>	<p v-say-hi>Hello, world</p></template>

Once our apps load up, you should see a console.log execute that prints out the HTMLParagraphElement reference.

You'll notice that these directives' logics are applied to elements through some means of an attribute-like selector, similar to how a component has a named tag associated with it.

Now that we've seen what a directive looks like, let's apply it to some real-world examples.

Basic Directives

Now that we have a reference to the underlying DOM node, we can use that to do various things with the element.

For example, let's say that we wanted to change the color of a button using nothing more than an HTML attribute — we can do that now using the HTMLElement's style property:

React
Angular
Vue

const useStyleBackground = () => {	const ref = (el) => {		el.style.background = "red";	};	return { ref };};const App = () => {	const { ref } = useStyleBackground();	return <button ref={ref}>Hello, world</button>;};

React Basic Directives - StackBlitz

import { createRoot } from "react-dom/client";const useStyleBackground = () => {	const ref = (el) => {		el.style.background = "red";	};	return { ref };};const App = () => {	const { ref } = useStyleBackground();	return <button ref={ref}>Hello, world</button>;};createRoot(document.getElementById("root")).render(<App />);

function injectElAndStyle() {	const el = inject(ElementRef);	el.nativeElement.style.background = "red";	return el;}@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	el = injectElAndStyle();}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button styleBackground>Hello, world</button> `,})class AppComponent {}

Angular Basic Directives - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	inject,	ElementRef,	Directive,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";function injectElAndStyle() {	const el = inject(ElementRef);	el.nativeElement.style.background = "red";	return el;}@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	el = injectElAndStyle();}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button styleBackground>Hello, world</button> `,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

When using the created method inside a directive, we can gain access to the underlying DOM node the directive is applied to using the function's arguments.

The first argument that's passed to created is a DOM node reference that we can change the style property of to style our button.

<!-- App.vue --><script setup>const vStyleBackground = {	created: (el) => {		el.style.background = "red";	},};</script><template>	<button v-style-background>Hello, world</button></template>

Vue Basic Directives - StackBlitz

<!-- App.vue --><script setup>const vStyleBackground = {	created: (el) => {		el.style.background = "red";	},};</script><template>	<button v-style-background>Hello, world</button></template>

While this is a good demonstration of how you can use an element reference within a directive, styling an element is generally suggested to be done within a CSS file itself, unless you have good reason otherwise.

This is because styling an element through JavaScript can cause issues with server-side rendering, and can also cause layout thrashing if done incorrectly.

Side Effect Handlers in Directives

Previously, in the book, we've explored adding a focus event when an element is rendered. However, in this chapter, we explicitly had to call a focus method. What if we could have our button focus itself immediately when it's rendered onto the page?

Luckily, with directives, we can!

See, while a component has a series of side effects associated with it: being rendered, updated, cleaned up, and beyond — so too does an HTML element that's bound to a directive!

Because of this, we can hook into the ability to use side effects within directives so that it focuses when an element is rendered.

React
Angular
Vue

As we already know, we can use built-in React hooks in our custom hooks, which means that we can use useEffect just like we could inside any other component.

const useFocusElement = () => {	const [el, setEl] = useState();	useEffect(() => {		if (!el) return;		el.focus();	}, [el]);	const ref = (localEl) => {		setEl(localEl);	};	return { ref };};const App = () => {	const { ref } = useFocusElement();	return <button ref={ref}>Hello, world</button>;};

React Directive Side Effects - StackBlitz

import { createRoot } from "react-dom/client";import { useEffect, useState } from "react";const useFocusElement = () => {	const [el, setEl] = useState();	useEffect(() => {		if (!el) return;		el.focus();	}, [el]);	const ref = (localEl) => {		setEl(localEl);	};	return { ref };};const App = () => {	const { ref } = useFocusElement();	return <button ref={ref}>Hello, world</button>;};createRoot(document.getElementById("root")).render(<App />);

Truthfully, this is a bad example for useEffect. Instead, I would simply run localEl.focus() inside of the ref function.

Angular allows you to use the same effect and afterRenderEffect APIs in directives as it does components.

@Directive({	selector: "[focusElement]",})class StyleBackgroundDirective {	el = inject(ElementRef);	constructor() {		afterRenderEffect(() => {			this.el.nativeElement.focus();		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button focusElement>Hello, world</button> `,})class AppComponent {}

Angular Directive Side Effects - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	inject,	ElementRef,	Directive,	afterRenderEffect,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Directive({	selector: "[focusElement]",})class StyleBackgroundDirective {	el = inject(ElementRef);	constructor() {		afterRenderEffect(() => {			this.el.nativeElement.focus();		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button focusElement>Hello, world</button> `,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Just as you can use the created property on a directive object, you can change this property's name to match any of Vue's component lifecycle method names.

<!-- App.vue --><script setup>const vFocusElement = {	mounted: (el) => {		el.focus();	},};</script><template>	<button v-focus-element>Hello, world</button></template>

Vue Directive Side Effects - StackBlitz

<!-- App.vue --><script setup>const vFocusElement = {	mounted: (el) => {		el.focus();	},};</script><template>	<button v-focus-element>Hello, world</button></template>

For example, if we wanted to add a cleanup to this directive, we could change mounted to unmounted instead.

Passing Data to Directives

Let's look back at the directive we wrote to add colors to our button. It worked, but that red we were applying to the button element was somewhat harsh, wasn't it?

We could just set the color to a nicer shade of red — say, #FFAEAE — but then what if we wanted to re-use that code elsewhere to set a different button to blue?

To solve this issue regarding per-instance customization of a directive, let's add the ability to pass in data to a directive.

React
Angular
Vue

Because a React Hook is a function at heart, we're able to pass values as we would to any other function:

const useStyleBackground = (color) => {	const ref = (el) => {		el.style.background = color;	};	return { ref };};const App = () => {	const { ref } = useStyleBackground("#FFAEAE");	return <button ref={ref}>Hello, world</button>;};

React Pass Directives Data - StackBlitz

import { createRoot } from "react-dom/client";import { useEffect, useState } from "react";const useStyleBackground = (color) => {	const ref = (el) => {		el.style.background = color;	};	return { ref };};const App = () => {	const { ref } = useStyleBackground("#FFAEAE");	return <button ref={ref}>Hello, world</button>;};createRoot(document.getElementById("root")).render(<App />);

To pass a value to an Angular directive, we can use the input method, which is the same as a component.

However, one way that a directive's inputs differ from a component's is that you need to prepend the selector value as the Input variable name, like so:

@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	styleBackground = input.required<string>();	el = inject(ElementRef);	constructor() {		effect(() => {			this.el.nativeElement.style.background = this.styleBackground();		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button styleBackground="#FFAEAE">Hello, world</button> `,})class AppComponent {}

Angular Pass Directives Data - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	inject,	ElementRef,	Directive,	effect,	input,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	styleBackground = input.required<string>();	el = inject(ElementRef);	constructor() {		effect(() => {			this.el.nativeElement.style.background = this.styleBackground();		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button styleBackground="#FFAEAE">Hello, world</button> `,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

Vue's directives are not simply functions — they are objects that contain functions and can access the value bound to the directive using arguments on each property.

While the first argument of each lifecycle's key is an element reference (el), the second argument will always be the value assigned to the directive.

<!-- App.vue --><script setup>const vStyleBackground = {	mounted: (el, binding) => {		el.style.background = binding.value;	},};</script><template>	<button v-style-background="'#FFAEAE'">Hello, world</button></template>

Vue Pass Directives Data - StackBlitz

<!-- App.vue --><script setup>const vStyleBackground = {	mounted: (el, binding) => {		el.style.background = binding.value;	},};</script><template>	<button v-style-background="'#FFAEAE'">Hello, world</button></template>

You access the bindings' value through binding.value, but can also access things like the previous value by using binding.oldValue.

Passing JavaScript Values

Similar to how you can pass any valid JavaScript object to a component's inputs, you can do the same with a directive.

To demonstrate this, let's create a Color class that includes the following properties:

class Color {	constructor(r, g, b) {		this.r = r;		this.g = g;		this.b = b;	}}

Then, we can render out this color inside our background styling directive:

React
Angular
Vue

class Color {	constructor(r, g, b) {		this.r = r;		this.g = g;		this.b = b;	}}const colorInstance = new Color(255, 174, 174);const useStyleBackground = (color) => {	const ref = (el) => {		el.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;	};	return { ref };};const App = () => {	const { ref } = useStyleBackground(colorInstance);	return <button ref={ref}>Hello, world</button>;};

React Directives Pass JS Data - StackBlitz

import { createRoot } from "react-dom/client";import { useEffect, useState } from "react";class Color {	constructor(r, g, b) {		this.r = r;		this.g = g;		this.b = b;	}}const colorInstance = new Color(255, 174, 174);const useStyleBackground = (color) => {	const ref = (el) => {		el.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;	};	return { ref };};const App = () => {	const { ref } = useStyleBackground(colorInstance);	return <button ref={ref}>Hello, world</button>;};createRoot(document.getElementById("root")).render(<App />);

class Color {	r: number;	g: number;	b: number;	constructor(r: number, g: number, b: number) {		this.r = r;		this.g = g;		this.b = b;	}}@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	styleBackground = input.required<Color>();	el = inject(ElementRef);	constructor() {		effect(() => {			const color = this.styleBackground();			this.el.nativeElement.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button [styleBackground]="color">Hello, world</button> `,})class AppComponent {	color = new Color(255, 174, 174);}

Angular Directives Pass JS Data - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	inject,	ElementRef,	Directive,	input,	effect,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";class Color {	r: number;	g: number;	b: number;	constructor(r: number, g: number, b: number) {		this.r = r;		this.g = g;		this.b = b;	}}@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	styleBackground = input.required<Color>();	el = inject(ElementRef);	constructor() {		effect(() => {			const color = this.styleBackground();			this.el.nativeElement.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: ` <button [styleBackground]="color">Hello, world</button> `,})class AppComponent {	color = new Color(255, 174, 174);}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

<!-- App.vue --><script setup>class Color {	constructor(r, g, b) {		this.r = r;		this.g = g;		this.b = b;	}}const colorInstance = new Color(255, 174, 174);const vStyleBackground = {	mounted: (el, binding) => {		const color = binding.value;		el.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;	},};</script><template>	<button v-style-background="colorInstance">Hello, world</button></template>

Vue Directives Pass JS Data - StackBlitz

<!-- App.vue --><script setup>class Color {	constructor(r, g, b) {		this.r = r;		this.g = g;		this.b = b;	}}const colorInstance = new Color(255, 174, 174);const vStyleBackground = {	mounted: (el, binding) => {		const color = binding.value;		el.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;	},};</script><template>	<button v-style-background="colorInstance">Hello, world</button></template>

Now, we can customize the color using incremental updates to the RGB values of a color we're passing.

Passing Multiple Values

While a class instance of Color may be useful in production apps, for smaller projects, it might be nicer to manually pass the r, g, and b values directly to a directive without needing a class.

Just as we can pass multiple values to a component, we can do the same within a directive. Let's see how it's done for each of the three frameworks:

React
Angular
Vue

Once again, the fact that a custom hook is still just a normal function provides us the ability to pass multiple arguments as if they are any other function.

const useStyleBackground = (r, g, b) => {	const ref = (el) => {		el.style.background = `rgb(${r}, ${g}, ${b})`;	};	return { ref };};const App = () => {	const { ref } = useStyleBackground(255, 174, 174);	return <button ref={ref}>Hello, world</button>;};

React Pass Multiple Values - StackBlitz

import { createRoot } from "react-dom/client";import { useEffect, useState } from "react";const useStyleBackground = (r, g, b) => {	const ref = (el) => {		el.style.background = `rgb(${r}, ${g}, ${b})`;	};	return { ref };};const App = () => {	const { ref } = useStyleBackground(255, 174, 174);	return <button ref={ref}>Hello, world</button>;};createRoot(document.getElementById("root")).render(<App />);

I have to come clean about something: when I said, "A directive's input must be named the same as the attribute's selector," I was lying to keep things simple to explain.

In reality, you can name an input anything you'd like, but then you need to have an empty attribute with the same name as the selector.

@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	r = input.required<number>();	g = input.required<number>();	b = input.required<number>();	el = inject(ElementRef);	constructor() {		effect(() => {			this.el.nativeElement.style.background = `rgb(${this.r()}, ${this.g()}, ${this.b()})`;		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<button styleBackground [r]="255" [g]="174" [b]="174">Hello, world</button>	`,})class AppComponent {}

Angular Pass Multiple Values - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	inject,	ElementRef,	Directive,	effect,	input,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";@Directive({	selector: "[styleBackground]",})class StyleBackgroundDirective {	r = input.required<number>();	g = input.required<number>();	b = input.required<number>();	el = inject(ElementRef);	constructor() {		effect(() => {			this.el.nativeElement.style.background = `rgb(${this.r()}, ${this.g()}, ${this.b()})`;		});	}}@Component({	selector: "app-root",	imports: [StyleBackgroundDirective],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<button styleBackground [r]="255" [g]="174" [b]="174">Hello, world</button>	`,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

If you forget to include the attribute with the same selector (in this case, styleBackground), you'll get the following error:
Can't bind to 'r' since it isn't a known property of 'button'.

Vue's directives do not directly support multiple arguments, as there's only one syntax to bind a value into a directive.

However, you can get around this limitation by passing an argument to the directive instead, like so:

<!-- App.vue --><script setup>const vStyleBackground = {	mounted: (el, binding) => {		const color = binding.value;		el.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;	},};</script><template>	<button v-style-background="{ r: 255, g: 174, b: 174 }">Hello, world</button></template>

Vue Pass Multiple Values - StackBlitz

<!-- App.vue --><script setup>const vStyleBackground = {	mounted: (el, binding) => {		const color = binding.value;		el.style.background = `rgb(${color.r}, ${color.g}, ${color.b})`;	},};</script><template>	<button v-style-background="{ r: 255, g: 174, b: 174 }">Hello, world</button></template>

Conditionally Rendered UI via Directives

The examples we've used to build out basic directives have previously all mutated elements that don't change their visibility; these elements are always rendered on screen and don't change that behavior programmatically.

But what if we wanted a directive that helped us dynamically render an element like we do with our conditional rendering but using only an attribute to trigger the render?

Luckily, we can do that!

Let's build out a basic "feature flags" implementation, where we can decide if we want a part of the UI rendered based on specific values.

The basic idea of a feature flag is that you have multiple different UIs that you'd like to display to different users to test their effectiveness.

For example, say you want to test two different buttons and see which button gets your users to click on more items to purchase:

<button>Add to cart</button>

<button>Purchase this item</button>

You'd start a "feature flag" that separates your audience into two groups, show each group their respective button terminology, and measure their outcome on user's purchasing behaviors. You'd then take these measured results and use them to change the roadmap and functionality of your app.

While the separation of your users into "groups" (or "buckets") is typically done on the backend, let's just use a simple object for this demo.

const flags = {	addToCartButton: true,	purchaseThisItemButton: false,};

In this instance, we might render something like:

<button id="addToCart">Add to Cart</button>

Let's build a basic version of this in each of our frameworks.

React
Angular
Vue

React has a unique ability that the other frameworks do not. Using JSX, you're able to assign a bit of HTML template into a variable... But that doesn't mean that you have to use that variable.

The idea in a feature flag is that you conditionally render UI components.

See where I'm going with this?

Let's store a bit of UI into a JSX variable and pass it to a custom React Hook that either returns the JSX or null to render nothing, based on the flags named boolean.

const flags = {	addToCartButton: true,	purchaseThisItemButton: false,};const useFeatureFlag = ({	flag,	enabledComponent,	disabledComponent = null,}) => {	if (flags[flag]) {		return { comp: enabledComponent };	}	return {		comp: disabledComponent,	};};function App() {	const { comp: addToCartComp } = useFeatureFlag({		flag: "addToCartButton",		enabledComponent: <button>Add to cart</button>,	});	const { comp: purchaseComp } = useFeatureFlag({		flag: "purchaseThisItemButton",		enabledComponent: <button>Purchase this item</button>,	});	return (		<div>			{addToCartComp}			{purchaseComp}		</div>	);}

React Conditionally Rendered UI - StackBlitz

import { createRoot } from "react-dom/client";import { useEffect, useState } from "react";const flags = {	addToCartButton: true,	purchaseThisItemButton: false,};const useFeatureFlag = ({	flag,	enabledComponent,	disabledComponent = null,}) => {	if (flags[flag]) {		return { comp: enabledComponent };	}	return {		comp: disabledComponent,	};};function App() {	const { comp: addToCartComp } = useFeatureFlag({		flag: "addToCartButton",		enabledComponent: <button>Add to cart</button>,	});	const { comp: purchaseComp } = useFeatureFlag({		flag: "purchaseThisItemButton",		enabledComponent: <button>Purchase this item</button>,	});	return (		<div>			{addToCartComp}			{purchaseComp}		</div>	);}createRoot(document.getElementById("root")).render(<App />);

Before we get into how to implement this functionality in Angular, I first need to circle back to how Angular uses ng-template to define a group of HTML elements that can then be rendered after the fact.

While we previously have used ng-template as a shorthand for "Don't render this until later," the tag is capable of so much more.

For starters, did you know that you can pass data to an ng-template?

Passing Data to `ng-template` Using `ngTemplateOutletContext`

To pass data to an ng-template, you need to provide a "context" object for what should be passed.

For example, let's say that we want to pass a "name" to a template. We can provide an object that looks like:

{	name: "Corbin";}

And then render this data inside a template using:

<ng-template let-name="name">	<p>{{name}}</p></ng-template>

Here, we're saying that we want to bind the context key name to a name template variable. This template variable is then accessible to any HTML nodes under the ng-template.

However, because ng-template doesn't render anything on its own, we'll need to supply a parent to render the ng-template's contents. We do this using the ngTemplateOutlet directive:

import { NgTemplateOutlet } from "@angular/common";@Component({	selector: "app-root",	changeDetection: ChangeDetectionStrategy.OnPush,	imports: [NgTemplateOutlet],	template: `		<ng-template #templ let-name="name">			<p>{{ name }}</p>		</ng-template>		<div			[ngTemplateOutlet]="templ"			[ngTemplateOutletContext]="{ name: 'Corbin' }"		></div>	`,})class AppComponent {}

Angular Pass Data to Template - StackBlitz

import { bootstrapApplication } from "@angular/platform-browser";import {	Component,	provideExperimentalZonelessChangeDetection,	ChangeDetectionStrategy,} from "@angular/core";import { NgTemplateOutlet } from "@angular/common";@Component({	selector: "app-root",	imports: [NgTemplateOutlet],	changeDetection: ChangeDetectionStrategy.OnPush,	template: `		<ng-template #templ let-name="name">			<p>{{ name }}</p>		</ng-template>		<div			[ngTemplateOutlet]="templ"			[ngTemplateOutletContext]="{ name: 'Corbin' }"		></div>	`,})class AppComponent {}bootstrapApplication(AppComponent, {	providers: [provideExperimentalZonelessChangeDetection()],});

We can even choose to use an ng-container instead of a div to avoid having a div in our rendered output:

<ng-template #templ let-name="name">	<p>{{name}}</p></ng-template><ng-container	[ngTemplateOutlet]="templ"	[ngTemplateOutletContext]="{name: 'Corbin'}"></ng-container>