Dart Example

Just another WordPress site

AngularDart

AngularDart v4 ng-class,ng-style

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 <2.0.0'
dependencies:
  angular: ^4.0.0
  angular_forms: ^1.0.0
  angular_router: ^1.0.2
  http: ^0.11.0
  stream_transform: ^0.0.6

dev_dependencies:
  angular_test: ^1.0.0
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  mockito: ^2.0.2
  test: ^0.12.21

transformers:
- angular:
    entry_points:
    - web/main.dart
    - test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter

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

@Component(
  selector: 'my-app',
  template: '''
  <div class="checkbox">
    <label>
      <input type="checkbox" [(ngModel)]="chk1" />クラス、スタイルバインディング
でCSS設定
    </label>
  </div>
  <strong>１）クラスバインディング</strong><br />
  <ul [class.bg-danger]="chk1">
    <li *ngFor="let member of members">{{member.name}}
      <ul>
        <li [class]="c_li1">年齢：{{member.age}}</li>
        <li [class]="c_li2">住所：{{member.address}}</li>
      </ul>
    </li>
  </ul>
  <strong>２）スタイルバインディング</strong><br />
  <button [style.color] = "chk1 ? 'red' : 'green'">Red</button>
  <button [style.backgroundColor]="chk1 ?'cyan' : 'grey'" >Save</button>
  <button [style.fontSize.em]="chk1 ? 3 : 1" >Big</button>
  <button [style.fontSize.%]="!chk1 ? 150 : 50" >Small</button><br />
  <strong>３）NgClassディレクティブ</strong><br />
  <div class="checkbox">
    <label>
      <input type="checkbox" [(ngModel)]="chk3" />NgclassでCSS設定
    </label>
  </div>
  <ul [ngClass]="{'bg-Danger': chk3, 'bg-success': !chk3}">
    <li *ngFor="let member of members">{{member.name}}
      <ul>
        <li [ngClass]="chk3 ? 'text-danger bg-info'
             :'text-info bg-warning'">年齢：{{member.age}}</li>
        <li [ngClass]="chk3 ? ['text-info','bg-warning']
             :['text-danger','bg-info']">住所：{{member.address}}</li>
      </ul>
    </li>
  </ul>
  <strong>４）NgStyleディレクティブ</strong><br />
  <div class="checkbox">
    <label>
      <input type="checkbox" [(ngModel)]="chk4" />スタイル変更
    </label>
  </div>
  <p [ngStyle]="{'font-style': styleExp1(chk4)}">
    ngStyleでスタイル設定、形式①
  </p>
  <p [ngStyle]="chk4 ? styleExp2 : styleExp3 ">
    ngStyleでスタイル設定、形式②
  </p>
    ''',
  directives: const [formDirectives,CORE_DIRECTIVES],
)
class AppComponent {
  List<Member> members = [
    new Member('John',20,'1st Ave Seattle WA'),
    new Member('Jessie',55,'2nd Ave Seattle WA'),
    new Member('Peter',20,'Mercer St Seattle WA'),
    new Member('Erika',37,'Alaskan Way Seattle WA')
  ];
  bool chk1;
  bool chk3;
  bool chk4;
  String c_li1 = "text-info bg-warning";
  String c_li2 = "text-danger bg-info";
  Map styleExp2 = {'font-style': 'italic', 'color': '#ff0000'};
  Map styleExp3 = {'font-style': 'normal', 'color': '#008000'};
  String styleExp1(chk) {
    if (chk) {
      return 'italic';
    } else {
      return 'normal';
    }
  }
}

class Member {
  String name;
  int age;
  String address;
 
  Member(this.name,this.age,this.address,);
}

void main() {
  bootstrap(AppComponent);
}