API リファレンス

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

インプット

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

名前	型	デフォルト	説明
`size`	`string \| number`	`50`	アバターのサイズ（ピクセル）
`name`	`string`	—	画像ソースが失敗したときにイニシャルを生成するためのユーザー名
`src`	`string \| SafeUrl`	—	アバターの主要なカスタム画像ソース URL
`alt`	`string`	—	アクセシビリティのためのアバター画像の代替テキスト
`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`	`#FFF`	テキスト avatar のイニシャルのテキスト色
`borderColor`	`string`	—	アバター周囲のボーダー色
`cornerRadius`	`string \| number`	`0`	round が false のときの角丸半径
`textSizeRatio`	`number`	`3`	アバターサイズからテキストサイズを計算する比率（size / textSizeRatio）
`initialsSize`	`string \| number`	`0`	表示するイニシャルの数を制限します（0 = 制限なし）
`facebookId`	`string`	—	プロフィール画像用の Facebook ユーザー ID（ベストエフォート、API 制限が適用される場合があります）
`githubId`	`string`	—	プロフィール画像を取得するための GitHub ユーザー名
`gravatarId`	`string`	—	プロフィール画像を取得するための Gravatar のメールアドレスまたは MD5 ハッシュ
`value`	`string`	—	カスタム値をアバターとして表示します（例: "75%"、"+5"）
`style`	`Partial<CSSStyleDeclaration>`	—	アバターのルート要素に適用するカスタムスタイル
`referrerpolicy`	`string`	—	アバター画像のリファラーポリシー（例: "no-referrer"）
`badge`	`string \| number \| boolean \| null`	—	角のオーバーレイ：`badge` / `[badge]="true"` → ドット、`badge="4k"` → ラベル付きピル、null / 未指定 → なし。
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	バッジのセマンティックカラー（primary · secondary · success · danger · warning · info · light · dark）→ `--hub-sys-color-*`。

アウトプット

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

名前	型	説明
`clickOnAvatar`	`Source`	アバターがクリックされたときに発行され、現在アクティブなソースオブジェクトを返します

テンプレート

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