File
|
changelog
|
|
Required : true
|
|
|
import {ChangeDetectionStrategy, Component, input} from '@angular/core';
import {MatButton} from '@angular/material/button';
import {
MatCard,
MatCardContent,
MatCardFooter,
MatCardHeader,
MatCardSubtitle,
MatCardTitle,
} from '@angular/material/card';
import {MatLabel} from '@angular/material/form-field';
import {MatIcon} from '@angular/material/icon';
import {Changelog} from '../../models/changelog.model';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
MatButton,
MatCard,
MatCardContent,
MatCardFooter,
MatCardHeader,
MatCardSubtitle,
MatCardTitle,
MatIcon,
MatLabel,
],
selector: 'nshmp-about-changelog',
styleUrl: './about-changelog.component.scss',
templateUrl: './about-changelog.component.html',
})
export class NshmpAboutChangelogComponent {
readonly changelog = input.required<Changelog>();
}
<mat-card>
<mat-card-header>
<mat-card-title>{{ changelog().title }}</mat-card-title>
<mat-card-subtitle>{{ changelog().date.toDateString() }}</mat-card-subtitle>
</mat-card-header>
@if (changelog().image) {
<img [src]="changelog().image" alt="Changelog" />
}
<mat-card-content>
<div class="padding-y-2" [innerHtml]="changelog().description"></div>
</mat-card-content>
@if (changelog().links && changelog().links!.length > 0) {
<mat-card-footer>
<mat-label>Changesets:</mat-label>
@for (link of changelog().links; track link) {
<a matButton="outlined" [href]="link.url" target="_blank" class="link">
<mat-icon>code</mat-icon>
{{ link.display }}
</a>
}
</mat-card-footer>
}
</mat-card>
Legend
Html element with directive