MiniCard component displays a customizable card with an image or initials.
app-mini-card
true
CommonModule
<div class="mini-card" [ngStyle]="getMergedCardStyles()"> <div *ngIf="imageSource; else noImage" class="image-container"> <img [src]="imageSource" alt="Profile" [ngStyle]="getMergedImageStyles()" /> </div> <ng-template #noImage> <div class="initials" [ngStyle]="getInitialsStyle()">{{ initials }}</div> </ng-template></div> Copy
<div class="mini-card" [ngStyle]="getMergedCardStyles()"> <div *ngIf="imageSource; else noImage" class="image-container"> <img [src]="imageSource" alt="Profile" [ngStyle]="getMergedImageStyles()" /> </div> <ng-template #noImage> <div class="initials" [ngStyle]="getInitialsStyle()">{{ initials }}</div> </ng-template></div>
['./mini-card.component.css']
initials
fontSize
customStyle
imageSource
roundedImage
imageStyle
getMergedCardStyles()
getMergedImageStyles()
getInitialsStyle()
<app-mini-card initials="AB" fontSize="20" [roundedImage]="true" imageSource="/path/to/image.jpg"></app-mini-card> Copy
<app-mini-card initials="AB" fontSize="20" [roundedImage]="true" imageSource="/path/to/image.jpg"></app-mini-card>
MiniCard component displays a customizable card with an image or initials.
Component
Selector
app-mini-card
Standalone
true
Imports
CommonModule
Template
Style Urls
['./mini-card.component.css']
Inputs
initials(string): Initials to display if no image is provided.fontSize(number): Font size for initials text, default is 14.customStyle(CSSStyleDeclaration): Custom styles for the card.imageSource(string): Source URL for the image.roundedImage(boolean): Whether the image should be rounded, default is false.imageStyle(CSSStyleDeclaration): Custom styles for the image.Methods
getMergedCardStyles(): Returns merged styles for the card.getMergedImageStyles(): Returns merged styles for the image.getInitialsStyle(): Returns styles for the initials text.Example