Search code examples
angulardartangular-dart

ngIf not working out of the box (Angular Dart)

I created a new project in WebStorm, which produces some sample code. The only modification I've made so far is to add an ngIf to the index.html:

<!DOCTYPE html>
<html>
  <head>
   (some boilerplate stuff)
  </head>
  <body>

     <div *ngIf="false"> //ALSO TRIED PUTTING THIS IN my-app
       <my-app >Loading...</my-app>
    </div>
 </body>
</html>

I'm expecting to see an empty web page when I run this, but I actually end up getting the To Do List sample app. Have I missed something really obvious? I've reloaded the project but no change.

Below some of the boilerplate sample code (only thing I've added here is CORE_DIRECTIVES):

main.dart

 void main() {  bootstrap(AppComponent);}

app_component.dart

@Component(
selector: 'my-app',
styleUrls: const ['app_component.css'],
templateUrl: 'app_component.html',
directives: const [CORE_DIRECTIVES, materialDirectives, TodoListComponent],
providers: const [materialProviders],
)
class AppComponent {

}
Solution

  • Directives and components work only in the template of Angular components.

    Outside of component templates, they are just ignored. You can use dart:html to modify the DOM outside Angular and for example run bootstrap(AppComponent) only after adding <my-app >Loading...</my-app> using dart:html.