Avatar

Docs

Avatar

An image element with a fallback for representing the user.

Preview

Code

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

CLI

Manual

npx shadcn-ng@latest add avatar

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>

Alert Badge