AngularDart : Property binding ngIf not used by any directive on an embedded template error while using *ngIf

Question

I am using AngularDart where i need to show and hide component based on boolean value registerDisplay. Tried using *ngIf , but throwing an error . Below is the html.

app_component.html:

<div *ngIf="!registerDisplay">
    <register-component></register-component>
</div>

What might be the reason. I came across solution for the error in Angular typescript . But that is not applicable to dart. Please suggest .

Answer 1

You need to register directives you want to use in the template

@Component(
  selector: 'my-component',
  directives: const [
    MaterialButtonComponent,
    MaterialIconComponent,
    MaterialTooltipDirective,
    ...
    NgIf,
    ...
  ],

instead of registering every directive individually you can register the common set provided by Angular itself by adding

coreDirectives,

to the directives list.

See also https://github.com/dart-lang/angular/blob/master/angular/lib/src/common/common_directives.dart