Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Angular’s NG8116 means a standalone component template uses a custom structural directive that the component has not imported. Import the directive’s class and add it to that component’s imports array. This is an Angular template-scope issue—not a missing HTML feature.
What NG8116 means
Structural directives such as *select or *featureFlag are Angular directives, even though their asterisk syntax looks like an HTML attribute. A standalone component must import the directive for Angular to recognize and use it in that component’s template.
As an Amazon Associate I earn from qualifying purchases.
Angular’s NG8116 documentation warns that using a structural directive without importing it will fail at runtime: Angular may attempt to bind to a property on the HTML element that does not exist.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →How to fix NG8116
-
Find the selector named in the template after the asterisk, such as
*select.#1 Best Overall
-
Locate the directive class that declares that selector. If it comes from a library or shared package, check that package’s exports and use its documented import path; there is no universal package path.
-
Import the directive class into the component file and add that class to the standalone component’s
importsmetadata:import { Component } from '@angular/core'; import { SelectDirective } from 'my-directives'; @Component({ imports: [SelectDirective], template: `<p *select="let data; from: source">{{ data }}</p>`, }) class MyComponent {} -
Rebuild or recheck the template with
strictTemplatesenabled. Confirm that the class inimportsis the directive matching the selector used in the template.Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Why the asterisk syntax still needs a directive import
Angular expands structural-directive shorthand into an <ng-template> that hosts the directive and wraps the original element and its contents. For example, the shorthand *myDir="let item of [1,2,3]" corresponds to a template with myDir and a myDirOf input. The syntax is Angular’s template syntax, not a built-in browser attribute. See Angular’s structural directives guide.
Rank #3
This distinction can help separate NG8116 from other template problems. NG8116 points to a missing directive import; malformed microsyntax or an input that does not match the directive can produce separate errors. Also, a bare <ng-template> does not render its contents by itself: an Angular directive or API must cause its embedded view to be rendered. See the Angular ng-template API.
NG8116 versus NG8103
Identify the directive in the template before choosing a fix. NG8116 concerns a missing custom structural directive; NG8103 concerns missing built-in control-flow directives in a standalone component.
| Diagnostic or template form | What it concerns | Typical direction |
|---|---|---|
NG8116, such as *select |
A custom structural directive is not imported into the standalone component. | Import the matching directive class and add it to the component’s imports. |
NG8103, such as *ngIf, *ngFor or *ngSwitch |
A built-in control-flow directive is missing from the standalone component’s imports. | Angular documents importing the individual directive or CommonModule. For NgIf and NgFor use cases, current API pages recommend @if and @for instead. |
See Angular’s extended diagnostics overview for the related checks. The NgIf and NgFor API pages mark those directives deprecated since v20.0 and recommend the corresponding control-flow blocks. That version-specific guidance does not change the import fix for a custom directive reported by NG8116.
When to adjust diagnostics or template structure
Check that the diagnostic is enabled
Angular extended diagnostics require strictTemplates; NG8116 has no additional prerequisite. Extended diagnostics are warnings by default, though a project can configure a diagnostic as an error or suppress it. If the warning is intentionally suppressed, Angular’s example uses this setting:
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"missingStructuralDirective": "suppress"
}
}
}
}Suppression hides the diagnostic; it does not put the directive in template scope or repair the missing import. Use it only when the exception is deliberate.
Use nested templates for multiple structural behaviors
Only one structural directive can use the * shorthand on a single element. If two structural behaviors need to wrap the same content, nest the template structure rather than placing two asterisk directives on one element. An <ng-container> can serve as a wrapper without adding a DOM element; see Angular’s ng-container API.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
