src/app/components/announcement-card/announcement-card.component.ts
Displays an outlined card with an announcement inside
| selector | announcement-card |
| styleUrls | ./announcement-card.component.scss |
| templateUrl | ./announcement-card.component.html |
Inputs |
| messages | |
Type : Announcement[]
|
|
Default value : []
|
|
|
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;
}
}