human-atlas
  1. Components
  2. AnnouncementCardComponent

File

src/app/components/announcement-card/announcement-card.component.ts

Description

Displays an outlined card with an announcement inside

Metadata

selector announcement-card
styleUrls ./announcement-card.component.scss
templateUrl ./announcement-card.component.html

Index

Inputs

Inputs

messages
Type : Announcement[]
Default value : []
Defined in src/app/components/announcement-card/announcement-card.component.ts:12

Message to be shown to the users

 
import { Component, Input } from '@angular/core';
import { Announcement } from './announcement-card';

/** Displays an outlined card with an announcement inside */
@Component({
  selector: 'announcement-card',
  templateUrl: './announcement-card.component.html',
  styleUrls: ['./announcement-card.component.scss'],
})
export class AnnouncementCardComponent {
  /** Message to be shown to the users */
  @Input() messages: Announcement[] = [];
}

<mat-card class="mat-card" *ngFor="let msg of messages">
  <mat-card-content>
    <markdown>
      <div *ngIf="msg.route; else text">
        {{ msg.message }}
        <a [routerLink]="['/release-notes/', msg.route]">{{ msg.routeText }}</a>
        {{ msg.emoji }}
      </div>
      <ng-template #text>
        {{ msg.message }}
        {{ msg.emoji }}
      </ng-template>
    </markdown>
  </mat-card-content>
</mat-card>

./announcement-card.component.scss 

:host {
  .mat-card {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.005em;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
  }

  a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    color: #444c65;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""