読者です 読者をやめる 読者になる 読者になる

masalibの日記

システム開発、運用と猫の写真ブログです

Angular:ngclassとngForOfについて

f:id:masalib:20170509231340j:plain
Angular(バージョン2以降)の勉強、その15です

前回がstyleだったので今回はclassの指定です
あと、ngForOfというリストのループで使用する
list処理で使うので覚えておきたいです

公式のreferenceはこちら

ngClass
NgClass - ts - API

ngForOf
NgForOf - ts - API


typescript側にclassを追加する

TypeScript側(/app/server/server.component.ts)親子関係の親の部分です

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styles: [`
    .online{
      color: white;
    } 
    `]
})

f:id:masalib:20170509095724p:plain


htmlのテンプレート1側(/app/server/server.component.html)親子関係の子の部分です

<p [ngStyle]="{backgroundColor:getColor()}"
  [ngClass]="{online: serverStatus==='online'}"
>
  {{ 'server'}}
  {{getColor()}}
  ID:{{ serverId }} ::staus {{ getServerStatus() }}
</p>

f:id:masalib:20170509095750p:plain




ngForOfについて

ngForという関数があるのですが
公式サイトにも記載されていますが、非推奨なので
できる限りngForを使っていきます

htmlのテンプレート2側(/app/servers/servers.component.html)親子関係の親の部分です

<app-server *ngFor="let server of servers"></app-server>
<ng-template ngFor let-item [ngForOf]="servers" let-i="index" [ngForTrackBy]="trackByFn">
<app-server></app-server>
</ng-template>

結果

f:id:masalib:20170509230736p:plain

ngForに関してはもう少し機能があるみたいなので
調査したいと思います