AngularDart v4 Structural Directive

wp-admin

7 years ago

AngularDart v4 Sample Code,Demo

AngularDart : 4.0.0
Dart : 1.24.1

Loading…

(html)
<head>
.....
  <script defer src="main.dart" type="application/dart"></script>
  <script defer src="packages/browser/dart.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>
</body>

(pubspec.yaml)
.....
environment:
  sdk: '>=1.24.0

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Directive(
  selector: '[myUnless]'
)
class UnlessDirective {
  TemplateRef _templateRef;
  ViewContainerRef _viewContainer;
  UnlessDirective(this._templateRef, this._viewContainer);

  @Input() set myUnless(bool condition) {
    if (!condition) {
      _viewContainer.createEmbeddedView(_templateRef);
    } else {
      _viewContainer.clear();
    }
  }
}

@Component(
  selector: 'my-app',
  template: '''
    <button (click)="condition = !condition">
      Set 'condition' to {{condition ? 'False': 'True'}}
    </button>
    <p *myUnless="condition">
      (A) This paragraph is displayed because the condition is false.
    </p>
    <p *myUnless="!condition">
      (B) This paragraph is displayed because the condition is true.
    </p>
    ''',
  directives: const [CORE_DIRECTIVES,UnlessDirective]
)
class AppComponent {
  bool condition = true;
}

void main() {
  bootstrap(AppComponent);
}