Avatar

An image element with a fallback for representing the user.

import { Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-preview',
	imports: [HlmAvatarImports],
	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 AvatarPreview {}

Installation

ng g @spartan-ng/cli:ui avatar

Usage

import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

<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>

Brain API

BrnAvatar

Selector: brn-avatar

BrnAvatarFallback

Selector: [brnAvatarFallback]

ExportAs: avatarFallback

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

BrnAvatarImage

Selector: img[brnAvatarImage]

ExportAs: avatarImage

Helm API

HlmAvatar

Selector: hlm-avatar

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmAvatarFallback

Selector: [hlmAvatarFallback]

ExportAs: avatarFallback

HlmAvatarImage

Selector: img[hlmAvatarImage]

ExportAs: avatarImage

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Badge

Autocomplete

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.