Angularコンポーネント基礎

コンポーネント基礎

Angular では基本的に、一つのコンポーネントは以下の 3 つのファイルから成り立ちます。

xxx.component.ts  - ロジックを記述　　
xxx.component.html - 表示する内容を記述  　
xxx.component.less - スタイルを記述

ts

xxx.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-xxx',
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.css']
})
export class XxxComponent {
  title = 'テストタイトルです';
}

.tsファイルでは、そのコンポーネントの定義やロジックを記述します。
@Component({})内部にて、上の3つのファイルがそのコンポーネントを構成するファイルであることを定義して関連付けています。

要素	説明
selector	そのコンポーネントが他のHTMLから参照されるときのタグ名になる。上の例では、<app-xxx></app-xxx>と記述すれば、このコンポーネントが表示される。
templateUrl	そのコンポーネントを構成するHTMLのパスを記述する。
styleUrls	そのコンポーネントに適用するスタイルシートのパスを記述する。

また、export class以下でそのコンポーネントのクラスを定義します。
ここにそのコンポーネントの持つ値やロジックを記述していきます。

ここでは、title = 'テストタイトルです'というプロパティを定義しています。

html

xxx.component.html

<h1>{{ title }}</h1>  

htmlファイルにはそのコンポーネントを構成するHTMLを書いていきます。テンプレートとも呼ばれます。
あるHTMLにこのコンポーネントのセレクタ<app-xxx></app-xxx>を記述すると、実際にはこのhtmlの内容が表示されることになります。

また、このhtmlファイルはxxxコンポーネントののテンプレートであるとxxx.component.tsファイルで定義されているため、xxx.component.tsで定義したクラスのプロパティを表示することができます。

ここではtsファイルで定義されているtitleというプロパティを表示しています。{{}}の中にプロパティ名を記述することで表示することができます。

less

xxx.component.less

h1 {
  font-size: 48px;
}  

lessファイルではそのコンポーネントのhtmlに適用するスタイルを定義します。