Dart: How to fix the condition?

Issue

I’m a newbie. I create an angular application using the IDEA template and insert the code from the example:

<p *ngIf="true">
    Expression is true and ngIf is true.
    This paragraph is in the DOM.
</p>

An error occurs:

[INFO]
———————————————————————— [INFO] Starting Build [INFO] Updating asset graph completed, took 16ms
[SEVERE] angular on lib/app_component.dart: Template parse errors:
line 6, column 4 of AppComponent: ParseErrorLevel.FATAL: Can’t bind to
‘ngIf’ since it isn’t an input of any bound directive. Please check
that the spelling is correct, and that the intended directive is
included in the host component’s list of directives.
^^^^^^^^^^^^ [INFO] Running build completed, took 650ms [INFO] Caching
finalized dependency graph completed, took 853ms [SEVERE]
build_web_compilers|entrypoint on web/main.dart (cached): Unable to
find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a
dev_dependency needs to move to a real dependency), or a build failure
(if importing a generated file).

Please check the following imports:

import 'package:untitled1/app_component.template.dart' as ng; from
untitled1|web/main.dart at 2:1

[SEVERE] build_web_compilers|entrypoint on test/app_test.dart
(cached): Unable to find modules for some sources, this is usually the
result of either a bad import, a missing dependency in a package (or
possibly a dev_dependency needs to move to a real dependency), or a
build failure (if importing a generated file).

Please check the following imports:

import 'package:untitled1/app_component.template.dart' as ng; from
untitled1|test/app_test.dart at 5:1

[SEVERE] build_web_compilers|entrypoint on
test/app_test.dart.browser_test.dart (cached): Unable to find modules
for some sources, this is usually the result of either a bad import, a
missing dependency in a package (or possibly a dev_dependency needs to
move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

import 'package:untitled1/app_component.template.dart' as ng; from
untitled1|test/app_test.dart at 5:1

[SEVERE] Failed after 1.6s

How to fix?

Solution

You need to list directives you use in the template in the @Component() annotation

import 'package:angular/angular.dart'

...

@Component(
  selector: 'foo-bar',
  templateUrl: 'foo_bar.html',
  directives: [coreDirectives /* or NgIf */],
)

Answered By – Günter Zöchbauer

Answer Checked By – Terry (FlutterFixes Volunteer)