{"id":128,"date":"2017-10-12T21:47:31","date_gmt":"2017-10-12T21:47:31","guid":{"rendered":"http:\/\/dart.honobono-life.info\/?p=128"},"modified":"2017-10-12T21:47:31","modified_gmt":"2017-10-12T21:47:31","slug":"angulardart-v4-ng-ifstyle-displayhidden","status":"publish","type":"post","link":"http:\/\/dart.honobono-life.info\/?p=128","title":{"rendered":"AngularDart v4 ng-if,[style.display],[hidden]"},"content":{"rendered":"<p>AngularDart v4 Sample Code,Demo<br \/>\n<!--more--><\/p>\n<ul>\n<li>AngularDart : 4.0.0<\/li>\n<li>Dart : 1.24.1<\/li>\n<\/ul>\n<div role=\"tabpanel\">\n<ul class=\"nav nav-tabs\">\n<li class=\"nav-item\"><button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#demo1\">demo<\/button><\/li>\n<li class=\"nav-item\"><button class=\"nav-link\" data-bs-toggle=\"tab\" data-bs-target=\"#html1\">markup<\/button><\/li>\n<li class=\"nav-item\"><button class=\"nav-link\" data-bs-toggle=\"tab\" data-bs-target=\"#script1\">dart<\/button><\/li>\n<\/ul>\n<div class=\"tab-content\">\n<div class=\"tab-pane fade show active\" id=\"demo1\">\n<p><my-app>Loading&#8230;<\/my-app><\/p><\/div>\n<div class=\"tab-pane fade\" id=\"html1\">\n<pre>\r\n(html)\r\n&lt;head>\r\n.....\r\n  &lt;script defer src=\"main.dart\" type=\"application\/dart\">&lt;\/script>\r\n  &lt;script defer src=\"packages\/browser\/dart.js\">&lt;\/script>\r\n&lt;\/head>\r\n&lt;body>\r\n  &lt;my-app>Loading...&lt;\/my-app>\r\n&lt;\/body>\r\n\r\n(pubspec.yaml)\r\n.....\r\nenvironment:\r\n  sdk: '>=1.24.0 <2.0.0'\r\ndependencies:\r\n  angular: ^4.0.0\r\n  angular_forms: ^1.0.0\r\n  angular_router: ^1.0.2\r\n  http: ^0.11.0\r\n  stream_transform: ^0.0.6\r\n\r\ndev_dependencies:\r\n  angular_test: ^1.0.0\r\n  browser: ^0.10.0\r\n  dart_to_js_script_rewriter: ^1.0.1\r\n  mockito: ^2.0.2\r\n  test: ^0.12.21\r\n\r\ntransformers:\r\n- angular:\r\n    entry_points:\r\n    - web\/main.dart\r\n    - test\/**_test.dart\r\n- test\/pub_serve:\r\n    $include: test\/**_test.dart\r\n- dart_to_js_script_rewriter\r\n<\/pre>\n<\/p><\/div>\n<div class=\"tab-pane fade\" id=\"script1\">\n<pre>\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular_forms\/angular_forms.dart';\r\n\r\nclass Member {\r\n  String name;\r\n  int age;\r\n  bool age_v;\r\n  String address;\r\n  bool address_v;\r\n \r\n  Member(this.name,this.age,this.age_v,this.address,this.address_v);\r\n}\r\n\r\n@Component(\r\n  selector: 'my-app',\r\n  styles: const [\r\n    '''\r\n    .detail > *:first-child {font-weight: bold}\r\n    '''\r\n  ],\r\n  template: '''\r\n&lt;strong>1)ng-if&lt;\/strong>&lt;br \/>\r\n  &lt;br \/>\r\n  &lt;div class=\"checkbox\">\r\n    &lt;label>\r\n      &lt;input type=\"checkbox\" [(ngModel)]=\"detail\" \/>Detail\r\n    &lt;\/label>\r\n  &lt;\/div>\r\n  &lt;ul>\r\n    &lt;li *ngFor=\"let member of members\">{{member.name}}\r\n      &lt;div *ngIf=\"detail\">\r\n        &lt;ul>\r\n          &lt;li>age:{{member.age}}&lt;\/li>\r\n          &lt;li>address:{{member.address}}&lt;\/li>\r\n        &lt;\/ul>\r\n      &lt;\/div>\r\n    &lt;\/li>\r\n  &lt;\/ul>\r\n&lt;strong>\uff12\uff09[style.display],[hidden]&lt;\/strong>&lt;br\/>\r\n  &lt;br \/>\r\n  &lt;ul>\r\n    &lt;li *ngFor=\"let member of members\">{{member.name}}\r\n      &lt;ul class=\"detail\">\r\n        &lt;li [style.display]=\"member.age_v ? 'list-item' : 'none'\">age:{{member.age}}&lt;\/li>\r\n        &lt;li [hidden]=\"member.address_v\">address:{{member.address}}&lt;\/li>\r\n      &lt;\/ul>\r\n    &lt;\/li>\r\n  &lt;\/ul>\r\n    ''',\r\n  directives: const [formDirectives,CORE_DIRECTIVES]\r\n)\r\nclass AppComponent {\r\n  List&lt;Member> members = [\r\n    new Member('John',20,true,'1st Ave Seattle WA',false),\r\n    new Member('Jessie',55,false,'2nd Ave Seattle WA',true),\r\n    new Member('Peter',20,true,'Mercer St Seattle WA',true),\r\n    new Member('Erika',37,false,'Alaskan Way Seattle WA',false)\r\n  ];\r\n  bool detail;\r\n}\r\n\r\nvoid main() {\r\n  bootstrap(AppComponent);\r\n}\r\n<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script type=\"text\/javascript\"  src='http:\/\/dart.honobono-life.info\/wp-content\/themes\/ang\/ngdart4\/ngif.dart.js'><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularDart v4 Sample Code,Demo<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-128","post","type-post","status-publish","format-standard","hentry","category-angular-dart"],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=128"}],"version-history":[{"count":1,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions"}],"predecessor-version":[{"id":129,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/128\/revisions\/129"}],"wp:attachment":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=128"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}