MediaSFU Angular
    Preparing search index...

    Class MiniCard

    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>

    ['./mini-card.component.css']

    • 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.
    • getMergedCardStyles(): Returns merged styles for the card.
    • getMergedImageStyles(): Returns merged styles for the image.
    • getInitialsStyle(): Returns styles for the initials text.
    <app-mini-card initials="AB" fontSize="20" [roundedImage]="true" imageSource="/path/to/image.jpg"></app-mini-card>
    
    Index

    Constructors

    • Parameters

      • injectedInitials: string
      • injectedFontSize: number
      • injectedCustomStyle: Partial<CSSStyleDeclaration>
      • injectedImageSource: string
      • injectedRoundedImage: boolean
      • injectedImageStyle: Partial<CSSStyleDeclaration>

      Returns MiniCard

    Methods

    Properties

    initials: string
    fontSize: number = 14
    customStyle: Partial<CSSStyleDeclaration> = {}
    imageSource: string
    roundedImage: boolean = false
    imageStyle: Partial<CSSStyleDeclaration> = {}