🅰️ Angular 20 Will Warn About Missing Custom Structural Directives

If you like directives new Angular version will help you in working with them

Photo by Pixabay: https://www.pexels.com/photo/person-holding-document-papers-259006/

Angular 20 is just around the corner with first release candidate being made available.

Mostly latest works revolve around cleanups and fine running features. One of the things that are especially interesting in this release is a developer experience improvement.

Hi! My name is Tom Smykowski and I’m an Angular expert

Let’s look at this example:

import { Component } from '@angular/core';
import { NgIf } from '@angular/common';

@Component({
  selector: 'app-my-standalone',
  imports: [NgIf],
  template: `<p *ngIf="show">Only when show is true</p>`,
})
export class MyStandaloneComponent {
  show = true;
}

The standalone component shown here imports a structural directive materialized under *ngIf using the old templating system.

If you forget to import NgIf or CommonModules, Angular compiler still be nice enought to nudge you about it.

However, you can also create your own structural directives, more or less like so:

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