API リファレンス

avatar の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

22 個のインプットで avatar を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`size`	`string \| number`	`50`	アバターのサイズ。数値だけならピクセル、CSS の長さ（1.75rem、50%、calc(2rem + 12px)）はそのまま描画されます
`name`	`string \| null`	—	画像ソースが失敗したときにイニシャルを生成するためのユーザー名
`src`	`string \| SafeUrl \| null`	—	アバターの主要なカスタム画像ソース URL
`alt`	`string \| null`	—	アクセシビリティのためのアバター画像の代替テキスト
`round`	`boolean`	`true`	アバターを円形にする（true）か、cornerRadius に従わせるか
`interactive`	`boolean`	`false`	アバターをインタラクティブなコントロールとしてマークします：role=“button” を公開し、フォーカス可能にし、Enter/Space で clickOnAvatar を発火します。(clickOnAvatar) をバインドするときは必ず有効にしてください。
`bgColor`	`string`	—	テキストアバターの背景色。指定しない場合は自動生成されます
`autoColor`	`boolean`	`true`	`true`（既定）の場合、イニシャルアバターは名前のハッシュから背景色を生成します。`false` にすると `--hub-avatar-bg-color` 変数でテーマ設定できます。明示的な `bgColor` は常に優先されます。
`fgColor`	`string \| undefined`	—	イニシャルと投影されたコンテンツの色。未指定なら、背景に応じて WCAG の基準を満たすほう——黒か白——をアバターが選びます。明示した値は、コントラストにかかわらず常に優先されます。
`borderColor`	`string`	—	アバター周囲のボーダー色
`cornerRadius`	`string \| number`	`0`	round が false のときの角丸半径
`textSizeRatio`	`number`	`3`	アバターサイズからテキストサイズを計算する比率（size / textSizeRatio）
`initialsSize`	`string \| number`	`0`	表示するイニシャルの数を制限します（0 = 制限なし）
`facebookId`	`string \| null`	—	プロフィール画像用の Facebook ユーザー ID（ベストエフォート、API 制限が適用される場合があります）
`githubId`	`string \| null`	—	プロフィール画像を取得するための GitHub ユーザー名
`gravatarId`	`string \| null`	—	プロフィール画像を取得するための Gravatar のメールアドレスまたは MD5 ハッシュ
`value`	`string \| null`	—	カスタム値をアバターとして表示します（例: "75%"、"+5"）
`style`	`Record<string, string \| number \| null \| undefined> \| string`	—	レンダリングされた内容（画像・イニシャル・投影コンテンツのスロット）にマージされるインラインスタイル。スタイルオブジェクトまたは CSS 文字列を受け取り、ホスト要素には適用されません
`referrerpolicy`	`string \| null`	—	アバター画像のリファラーポリシー（例: "no-referrer"）
`placeholder`	`string`	—	最後の手段となる画像。ほかに何も描かれていないあいだ（解決したソースがない、ソースが指定されていない、あるいは読み込み中）で、イニシャルもない場合にだけ表示されます。フォールバック連鎖には決して加わらないため、`src` のようにイニシャルを追い越すことはありません。
`badge`	`string \| number \| boolean \| null`	`null`	角のオーバーレイ：`badge` / `[badge]="true"` → ドット、`badge="4k"` → ラベル付きピル、null / 未指定 → なし。
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	`null`	バッジのセマンティックカラー（primary · secondary · success · danger · warning · info · light · dark）→ `--hub-sys-color-*`。

アウトプット

avatar の動作に反応 — ロジックを接続できる 1 個のイベント。

名前	型	説明
`clickOnAvatar`	`OutputEmitterRef<Source \| null>`	クリック時、および `interactive` 指定時は Enter/Space でも発行されます。アバターを描画しているソース（`sourceType`、`sourceId`、`getAvatar(size)` を持ちます。解決したものがなければ null）を返します。`Source` はパッケージから公開されているので、ハンドラーは any に逃げずに型を書けます

メソッド

avatar をコードから操作 — プログラム操作のための 1 個のメソッドを備えています。

名前	シグネチャ	戻り値	説明
`Source.getAvatar`	`getAvatar(size: number): string`	`string`	指定したサイズでそのソースが描くものを解決します。リモートのソースなら画像の URL、ローカルならイニシャルや素のテキストです。`Source` は `clickOnAvatar` のペイロードで、パッケージから公開されています。

テンプレート

テンプレートはまだドキュメント化されていません。