Skip to main content
CometChatAvatar component displays an image or user’s avatar with fallback to the first two letters of the username or group’s icon with fallback to the first two letter of the group name.

​
Properties

NameTypeDescription
imagestringImage URL of the avatar
namestringFallback name of the avatar
avatarStyleAvatar StyleStyling properties of the element

​
Avatar Style

Styling properties and values of the avatar element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
outerViewBorderSets the border of the outer edge of the element
outerViewBorderSpacingSets the spacing between the profile picture and the outerViewBorder
borderRadiusSets the border radius of the element
backgroundColorSets the background color of the element. Reference link
backgroundSizeSets the size of the element’s background image. Reference link
nameTextColorSets the foreground color of the initials.
nameTextFontSets all the different properties of font for the initials. Reference link

​
Usage

  • HTML
  • JavaScript
<!--use the element-->
<cometchat-avatar
[image]="profilePic"
[avatarStyle]="avatarStyle"
></cometchat-avatar>