Docs
Avatar
Avatar
An image element with a fallback for representing the user.
Loading...
Loading...
import { UbAvatarDirective, UbAvatarFallbackDirective, UbAvatarImageDirective } from '@/components/ui/avatar'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'avatar-demo-new-york',
imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
template: `
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
`,
})
export class AvatarDemoNewYork { }import { UbAvatarDirective, UbAvatarFallbackDirective, UbAvatarImageDirective } from '@/components/ui/avatar'
import { Component } from '@angular/core'
@Component({
standalone: true,
selector: 'avatar-demo-default',
imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
template: `
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
`,
})
export class AvatarDemoDefault { }Installation
npx shadcn-ng@latest add avatar
npm
yarn
pnpm
bun
Copy and paste the following code into your project.
import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
import { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
@Directive({
standalone: true,
selector: 'span[ubAvatar]',
hostDirectives: [RdxAvatarRootDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'img[ubAvatarImage]',
hostDirectives: [RdxAvatarImageDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarImageDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('aspect-square h-full w-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'span[ubAvatarFallback]',
hostDirectives: [RdxAvatarFallbackDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarFallbackDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
})
}import { cn } from '@/lib/utils'
import { computed, Directive, input } from '@angular/core'
import { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
@Directive({
standalone: true,
selector: 'span[ubAvatar]',
hostDirectives: [RdxAvatarRootDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'img[ubAvatarImage]',
hostDirectives: [RdxAvatarImageDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarImageDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('aspect-square h-full w-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'span[ubAvatarFallback]',
hostDirectives: [RdxAvatarFallbackDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarFallbackDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
})
}Update the import paths to match your project setup.
Usage
import {
UbAvatarDirective,
UbAvatarImageDirective,
UbAvatarFallbackDirective
} from '@/components/ui/avatar.directive'<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>