Run the CLI
Use the CLI to add the component to your project.
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
basic
import { Component } from '@angular/core';
import { ZardAvatarGroupComponent } from '../avatar-group.component';
import { ZardAvatarComponent } from '../avatar.component';
@Component({
selector: 'z-demo-avatar-basic',
standalone: true,
imports: [ZardAvatarComponent, ZardAvatarGroupComponent],
template: `
<z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zFallback="ZA" [zSize]="32" />
<z-avatar zSrc="error-image.png" zFallback="ZA" zSize="sm" />
<z-avatar-group>
<z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zFallback="JD" zSize="sm" />
<z-avatar zSrc="https://github.com/srizzon.png" zFallback="SA" zSize="sm" />
<z-avatar zSrc="https://github.com/Luizgomess.png" zFallback="LU" zSize="sm" />
</z-avatar-group>
`,
})
export class ZardDemoAvatarBasicComponent {}
status
import { Component } from '@angular/core';
import { ZardAvatarComponent } from '../avatar.component';
@Component({
selector: 'z-demo-avatar-status',
standalone: true,
imports: [ZardAvatarComponent],
template: `
<z-avatar zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />
<z-avatar zStatus="online" zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />
<z-avatar zStatus="offline" zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />
<z-avatar zStatus="doNotDisturb" zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />
<z-avatar zStatus="away" zSrc="/images/avatar/imgs/avatar_image.jpg" zAlt="Image" />
`,
})
export class ZardDemoAvatarStatusComponent {}