Tip: このガイドでは、すでに基本概念のガイドを読んでいることを前提としています。Angularを初めて使う場合は、まずそちらをお読みください。
すべてのコンポーネントには次のものが必要です。
- ユーザー入力の処理やサーバーからのデータ取得などの動作を定義するTypeScriptクラス
- DOMにレンダリングされる内容を制御するHTMLテンプレート
- HTMLでコンポーネントがどのように使用されるかを定義するCSSセレクター
TypeScriptクラスの上部に @Component デコレーター を追加することで、コンポーネントにAngular固有の情報を与えます。
@Component({ selector: 'profile-photo', template: `<img src="profile-photo.jpg" alt="Your profile photo">`,})export class ProfilePhoto { }
データバインディング、イベント処理、制御フローなど、Angularテンプレート作成に関する詳細は、テンプレートガイドを参照してください。
@Component デコレーターに渡されるオブジェクトは、コンポーネントのメタデータと呼ばれます。これには、このガイドで説明されている selector、template、その他のプロパティが含まれています。
コンポーネントには、オプションでそのコンポーネントのDOMに適用されるCSSスタイルのリストを含めることができます。
@Component({ selector: 'profile-photo', template: `<img src="profile-photo.jpg" alt="Your profile photo">`, styles: `img { border-radius: 50%; }`,})export class ProfilePhoto { }
デフォルトでは、コンポーネントのスタイルは、そのコンポーネントのテンプレートで定義された要素にのみ影響を与えます。Angularのスタイリングアプローチの詳細については、コンポーネントのスタイリングを参照してください。
テンプレートとスタイルを別々のファイルにも記述できます。
@Component({ selector: 'profile-photo', templateUrl: 'profile-photo.html', styleUrl: 'profile-photo.css',})export class ProfilePhoto { }
これにより、プロジェクト内の_表示_と_動作_の懸念事項を分離できます。プロジェクト全体に対して1つのアプローチを選択するか、コンポーネントごとにどちらを使用するかを決定できます。
templateUrlとstyleUrlの両方は、コンポーネントが存在するディレクトリを基準とした相対パスです。
コンポーネントの使用
@Componentデコレーターでのインポート
コンポーネント、ディレクティブ、またはパイプを使用するには、
@Componentデコレーターのimports配列に追加する必要があります。
import {ProfilePhoto} from './profile-photo';@Component({ // このコンポーネントのテンプレートで使用するために、 // `ProfilePhoto`コンポーネントをインポートします。 imports: [ProfilePhoto], /* ... */})export class UserProfile { }
デフォルトでは、Angularコンポーネントはスタンドアロンです。つまり、他のコンポーネントのimports配列に直接追加できます。以前のバージョンのAngularで作成されたコンポーネントは、代わりに@Componentデコレーターでstandalone: falseを指定している場合があります。これらのコンポーネントの場合、代わりにコンポーネントが定義されているNgModuleをインポートします。詳細は、完全なNgModuleガイドを参照してください。
IMPORTANT: 19.0.0より前のAngularバージョンでは、standaloneオプションはデフォルトでfalseです。
テンプレートでのコンポーネントの表示
すべてのコンポーネントはCSSセレクターを定義します。
@Component({ selector: 'profile-photo', ...})export class ProfilePhoto { }
Angularがサポートするセレクターの種類と、セレクターの選択に関するガイダンスについては、コンポーネントセレクターを参照してください。
_他の_コンポーネントのテンプレートで一致するHTML要素を作成することで、コンポーネントを表示します。
@Component({ selector: 'profile-photo',})export class ProfilePhoto { }@Component({ imports: [ProfilePhoto], template: `<profile-photo />`})export class UserProfile { }
Angularは、遭遇する一致するHTML要素ごとにコンポーネントのインスタンスを作成します。コンポーネントのセレクターと一致するDOM要素は、そのコンポーネントのホスト要素と呼ばれます。コンポーネントのテンプレートの内容はそのホスト要素内にレンダリングされます。
コンポーネントによってレンダリングされるDOM（コンポーネントのテンプレートに対応）は、 そのコンポーネントのビューと呼ばれます。
このようにコンポーネントを構成することで、Angularアプリケーションをコンポーネントのツリーと考えることができます。