angular__angular/aio/content/extended-diagnostics/NG8103.md

@name Missing control flow directive

@description

This diagnostics ensures that a standalone component which uses known control flow directives (such as *ngIf, *ngFor, *ngSwitch) in a template, also imports those directives either individually or by importing the CommonModule. Alternatively, use Angular's built-in control flow.

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

@Component({ standalone: true, // Template uses *ngIf, but no corresponding directive imported. template: <div *ngIf="visible">Hi</div>, // … }) class MyComponent {}

How to fix the problem

Use Angular's built-in control flow instead.

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

@Component({ standalone: true, template: @if (visible) { <div>Hi</div> }, // … }) class MyComponent {}

Or make sure that a corresponding control flow directive is imported.

A directive can be imported individually:

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

@Component({ standalone: true, imports: [NgIf], template: <div *ngIf="visible">Hi</div>, // … }) class MyComponent {}

or you could import the entire CommonModule, which contains all control flow directives:

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

@Component({ standalone: true, imports: [CommonModule], template: <div *ngIf="visible">Hi</div>, // … }) class MyComponent {}

@reviewed 2022-02-28