AngularのHTMLテンプレートを試す【超初心者】

よく、「あれどう書くんだっけ？」となるHTMLテンプレート周りのあれこれをメモします。

##データバインディング

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  importData:string = "importMessage"//変数「importData」に「importMessage」を代入
}

```

```html:app.component.html
<!--変数「importData」を表示する-->
<h1>{{importData}}</h1>
```
<img width="753" alt="スクリーンショット 2017-07-30 7.24.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/a725b9b7-3bfb-317e-7757-03498982acd0.png">

##双方向データバインディング

次に双方向データバインドです。
双方向とは
画面側からプログラム(ts)
プログラムから画面
と行き来させる方法です。
双方向の場合は、FormModuleが必要になるので追加します。

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

app.component.tsは通常のデータバインドと差はなく、変数を用意しておくだけです。

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'masao';
}
```

inputタグに値を入れると、それがapp.component.tsに送られ、
app.component.tsのname変数の値が{{name}}にデータバインドされます。

```html:app.component.html
<!--ts側へ送られます-->
<input  type="text" [(ngModel)]="name">
<!--ts側から受け取ります-->
<h1>{{name}}</h1>

```

<img width="473" alt="スクリーンショット 2017-07-30 8.09.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/6e14c1d6-cca7-936a-9516-01dfc76541eb.png">

##条件分岐if
trueだった場合表示し
falseだった場合非表示にします。

FormModuleが必要になるので追加します。

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

変数flgにfalseをもたせます。

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  flg = false;//追加
}

```

*ngIfにtrueかfalseを指定します。

```html:app.component.html
<h1 *ngIf="flg">テキスト1</h1><!--falseなので非表示-->
<h1 *ngIf="!flg">テキスト2</h1><!--trueなので表示-->
```
<img width="789" alt="スクリーンショット 2017-07-30 18.13.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/1a9a9b64-c5e6-c858-832e-e128e2a71447.png">

*ngIf="false"の場合htmlファイルに書かれもしなくなります。


##条件分岐switch

条件にあったものを表示ます。

FormModuleが必要になるので追加します。

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

変数sexに性別として男をもたせます。

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sex = "men";//追加
}

```

セレクトボックスから性別を選び、選んだ性別によって下のメッセージが変わるように作っています。
セレクトボックスからapp.component.tsへ値を送っている仕組みは双方向データバインディングをご参考にしてください。

```html:app.component.html
<!--selectボックスで値を指定して変数sexに送る-->
<select [(ngModel)]="sex">
  <option value="men">男</option>
  <option value="women">女</option>
  <option value="secret">秘密</option>
</select>

<!--変数sexの中身によって表示を変える-->
<div [ngSwitch]="sex">
  <div *ngSwitchCase="'men'">500円です。</div>
  <div *ngSwitchCase="'women'">300円です。</div>
  <div *ngSwitchDefault></div>
</div>

```
<img width="734" alt="スクリーンショット 2017-07-30 18.21.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/f6efff2f-8529-5ab6-ee10-98f0f51c2914.png">

複数の表示を操ることができます。




##ループ処理

配列の値などを繰り返し表示します。

FormModuleが必要になるので追加します。

```ts:app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";//ここを追加

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule//ここを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

```


app.component.tsには表示する配列を用意しておきます。

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  names = ["masao0","masao1","masao2","masao3"];
}

```

配列を一つづつ読み出し、バインドします。

```html:app.component.html
<ul>
  <li *ngFor="let name of names; let i=index">{{name}}</li><!--ここが繰り返される-->
</ul>
```
<img width="589" alt="スクリーンショット 2017-07-30 8.05.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/eb97fa91-e45d-9bf0-95c5-24e46fa993e2.png">

配列の中身をすべて表示しています。




##要素追加

こちらはFormsModuleは必要ありません。
変数に要素に指定したい値を代入しておきます。

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url = "http://google.co.jp";
}

```

要素に変数を割り当てます。

```html:app.component.html
<ul>
  <a [href]="url">こちら</a>
</ul>
```

<img width="642" alt="スクリーンショット 2017-07-30 18.33.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/f88b1cba-2643-6930-075a-1a3986a00778.png">

hrefに変数url内のgoogleのURLが割り当てられているのがわかります。



##CSSを追加

CSSのクラスをタグに割り当てます。

```html:app.component.html
<h1 [ngClass]="{colorstyle:true}">masao1</h1>
<h1 [ngClass]="{colorstyle:false}">masao2</h1>
```

```css:app.component.css
.colorstyle{
  color:red;
}
```
<img width="688" alt="スクリーンショット 2017-07-30 18.41.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/778d4a0d-68b4-eaa9-63f7-e2068ad98dc0.png">


##イベント追加

```html:app.component.html
<button (click)="masao()">クリックイベント</button><!--クリックイベントを追加-->
```

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  masao(){
    alert('this is masao!');
  }
}

```
<img width="909" alt="スクリーンショット 2017-07-30 18.44.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/0cee4466-31d9-2cca-a3ca-123b17097782.png">



##パイプ

```html:app.component.html
{{text|uppercase}}
<!--uppercaseは大文字に変換する-->
```

```ts:app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text:string = "masao";
}

```
<img width="557" alt="スクリーンショット 2017-07-30 18.48.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/18ae8c69-b3e6-4461-8df3-0b1c408dba30.png">


masaoが大文字で表示されています。


##自作タグ

componentを作ります。

```:ターミナル
kuniatsu$ ng generate component origintag

```

新しく作ったcomponentのHTMLファイルを編集します。
app.component.htmlではなくorigintag.component.htmlです。

```html:origintag.component.html
<p>
this is origin.
</p>
```
自作タグはセレクター名で使用します。

```html:app.component.html
<app-origintag></app-origintag>
```
<img width="572" alt="スクリーンショット 2017-07-30 18.55.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/98758/7e547dcf-a75a-8c90-657c-d7e5b39e9900.png">