Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NG8103: 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 {}