AngularDart v4 disabled,disabled,readonly,selected

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';

@Component(
  selector: 'my-app',
  template: '''
<strong><input type="checkbox" [(ngModel)]="checkValue">Enable/Disable</strong><br />
  <br />
<strong>1)[disabled]</strong>
  <button class="btn btn-success" [disabled]="checkValue">Button</button><br />
<strong>2)[checked]</strong>
  <input type="checkbox" [checked]="checkValue">CheckBox<br />
<strong>3)[readonly]</strong>
  <input type="text" [readonly]="checkValue" value="ReadOnly"/><br />
<strong>4)[selected]</strong>
  <select>
    <option selected>Option1</option>
    <option>Option2</option>
    <option [selected]="checkValue">Selected</option>
  </select>
    ''',
  directives: const [formDirectives],
)
class AppComponent {
  bool checkValue = false;
}

void main() {
  bootstrap(AppComponent);
}