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>
    

    Implements

    • OnChanges
    Index

    Accessors

    Constructors

    • Parameters

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

      Returns MiniCard

    Methods

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    • Returns {
          width: string;
          height: string;
          maxWidth: string;
          maxHeight: string;
          display: string;
          justifyContent: string;
          alignItems: string;
          position: string;
          overflow: string;
          borderRadius: string;
          background: string;
          border: string;
          boxShadow: string;
      }

    • Returns {
          textAlign: string;
          "font-size": string;
          fontWeight: string;
          letterSpacing: string;
          textTransform: string;
          lineHeight: string;
          color: string;
          textShadow: string;
      }

    Properties

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