お仕事だと一番よく使うかもしれない、要素をテーブルにするための繰り返しのディテクティブ。 TABLEなら繰り返しの指示は<table>に書く。 複数の要素を繰り返したかったら<ng-container>というダミーの枠を作る。 app.component.html <table class="table"> <tr> <th>No</th><th>通称</th><th>型式番号</th><th>主なパイロット</th> </tr> <tr *ngFor="let b of ms; index as i"> <td>{{i + 1}}</td> <td></td></tr></table></ng-container></table>…

条件によって要素を追加・削除する。これは開発者ツールでみたDOMの変化が面白かった。 app.component.html <form> <label for="ifsample">表示/非表示</label> <input id="ifsample" name="ifsample" type="checkbox" [(ngModel)]="ifsample" /> </form> <div *ngIf="ifsample"> <p>見えてる？</p> </div> app.component.ts export class AppComponent { ifsample = false; }…

テンプレートの機能にパイプというものがあって、 シェルのパイプのような記法で表示する変数を整形できる。 表示のための機能はテンプレートに寄せたいと、そういうことなのかな。 わざわざ新しい記法を入れてまでやることなのかとか、そんな気がしないでも…

読んでもよくわからない・・・サンプルは以下 app.component.html <form> <label for="name">名前:</label> <input id="name" name="name" [(ngModel)]="myName" /> <div>こんにちは、{{myName}}さん!</div> </form> app.component.ts export class AppComponent { myName = '山田' } [ ]でViewへ向かう方向のバインド、( )でコンポーネントへ向かう方向のバインドを …

フロントの動作の核心、イベントの扱いでございましょう。 app.component.htmlはこんな感じ <input type="button" (click)="setCTime($event)" value="現在時刻" />{{ctime}} <hr /> <form> <label for="key">キー入力:</label> <input id="key" name="key" (keydown)="keylog($event)" /> </form> <div>キーコード:{{which}}…</div></hr>

app.component.htmlはこんな感じ <table border="1"> <tr><td [attr.rowspan]="len">結合</td><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> </table> <div class="line back" [class.fore]="clazz" [style.text-align]="align" [style.font-size.%]="fsize">…</div>

この本で勉強してる。安定の山田祥寛クオリティ。感謝しかない。Amazonへのリンクを貼ってますが、技術評論社の本なのでPDF版が買えますからそちらをお勧め。下のリンクからどうぞ。 Angular アプリケーションプログラミング | Gihyo Digital Publishing … …

プロジェクトの切れ目ってこともあり、新しいものを勉強する。 なので、買って1年ぐらいほったらかしのAngularの本をやる。 まず、githubにあるquickstartを取ってこいと書いてあるので観に行くと、 quickstartはCLIツールをインストールしてそこから取るよ…