Custom structural directives in Angular - Step-by-Step Execution

Concept Flow - Custom structural directives

Start: Angular template

↓

Detect *directive syntax

↓

Call directive's constructor

↓

Directive receives TemplateRef & ViewContainerRef

↓

Directive decides when/how to add/remove views

↓

ViewContainerRef creates embedded views

↓

Angular renders embedded views in DOM

↓

Directive updates views on input changes

↓

End: DOM reflects directive logic

Angular reads the template, finds the custom structural directive, then uses its logic to add or remove parts of the DOM dynamically.

Execution Sample

Angular

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appShow]' })
export class ShowDirective {
  constructor(private tpl: TemplateRef<any>, private vcr: ViewContainerRef) {}

  @Input() set appShow(condition: boolean) {
    this.vcr.clear();
    if (condition) this.vcr.createEmbeddedView(this.tpl);
  }
}

This directive shows or hides a template part based on a boolean input.

Execution Table

Step	Action	Input Condition	ViewContainerRef State	DOM Change
1	Directive instantiated	N/A	Empty	No DOM added
2	Input appShow set to true	true	Cleared then view created	Template inserted in DOM
3	Input appShow set to false	false	Cleared	Template removed from DOM
4	Input appShow set to true again	true	Cleared then view created	Template re-inserted in DOM
5	No further input changes	N/A	View remains	DOM unchanged
6	End of trace	N/A	Final state kept	DOM reflects last input

💡 Execution stops as no more input changes occur; DOM matches directive logic.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
condition	undefined	true	false	true	true
ViewContainerRef state	empty	view created	cleared	view created	view created

Key Moments - 3 Insights

Why does the directive clear the ViewContainerRef before creating a new view?

Clearing removes any previously rendered views to avoid duplicates. See execution_table rows 2 and 3 where clearing happens before creating or removing views.

What happens if the input condition is false?

The directive clears the container and does not create a view, so the template is removed from the DOM. See execution_table row 3.

How does Angular know where to insert the template in the DOM?

Angular uses the ViewContainerRef linked to the directive's host element to insert or remove embedded views dynamically.

Visual Quiz - 3 Questions

Look at the execution_table, what is the ViewContainerRef state after step 3?

A View created

B Unchanged

C Cleared

D Error state

💡 Hint

Check the 'ViewContainerRef State' column in row 3 of the execution_table.

At which step does the template get inserted back into the DOM after being removed?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for when the input condition changes back to true and a view is created again.

If the input condition never changes from true, how would the execution_table change?

A No clearing steps would occur

B Views would be created and cleared repeatedly

C The template would never be inserted

D The directive would throw an error

💡 Hint

Refer to variable_tracker for condition changes and execution_table for clearing actions.

Concept Snapshot

Custom structural directives in Angular
- Use @Directive with selector like '[appShow]'
- Inject TemplateRef and ViewContainerRef
- Control DOM by creating/removing embedded views
- Use input setters to react to changes
- Clear container before adding views to avoid duplicates

Full Transcript

Custom structural directives in Angular let you add or remove parts of the page dynamically. Angular reads the template and finds your directive marked with a star (*). It calls your directive's constructor, giving you the template and a place to insert views. Your directive decides when to add or remove these views based on input values. For example, if the input is true, it creates the view and inserts it into the DOM. If false, it clears the container, removing the view. This process repeats whenever the input changes, keeping the page in sync with your logic.