Avatar
An image element with a fallback for representing the user.
import { Component } from '@angular/core';
import { HlmAvatarComponent, HlmAvatarFallbackDirective, HlmAvatarImageDirective } from '@spartan-ng/ui-avatar-helm';
@Component({
selector: 'spartan-avatar-preview',
standalone: true,
imports: [HlmAvatarImageDirective, HlmAvatarComponent, HlmAvatarFallbackDirective],
template: `
<hlm-avatar variant="large">
<img src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" hlmAvatarImage />
<span class="bg-[#FD005B] text-white" hlmAvatarFallback>RG</span>
</hlm-avatar>
`,
})
export class AvatarPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui avatar
ng g @spartan-ng/cli:ui avatar
Usage
import { HlmAvatarImageDirective, HlmAvatarComponent, HlmAvatarFallbackDirective } from '@spartan-ng/ui-avatar-helm';<hlm-avatar>
<img src='/assets/avatar.png' alt='spartan logo. Resembling a spartanic shield' hlmAvatarImage />
<span class='text-white bg-destructive' hlmAvatarFallback>RG</span>
</hlm-avatar>