src/app/components/card-with-header/card-with-header.component.ts
Displays a card to navigate to other pages or external links along with a title
| selector | card-with-header |
| styleUrls | ./card-with-header.component.scss |
| templateUrl | ./card-with-header.component.html |
Properties |
|
Inputs |
| cardBlockData | |
Type : CardBlock[]
|
|
Default value : []
|
|
|
Title and details to be displayed inside the card |
|
| Readonly router |
Default value : inject(Router)
|
|
Reference to the Router |
import { Component, Input, inject } from '@angular/core';
import { Router } from '@angular/router';
import { CardBlock } from '../card-button-long/long-card';
/** Displays a card to navigate to other pages or external links along with a title */
@Component({
selector: 'card-with-header',
templateUrl: './card-with-header.component.html',
styleUrls: ['./card-with-header.component.scss'],
})
export class CardWithHeaderComponent {
/** Title and details to be displayed inside the card */
@Input() cardBlockData: CardBlock[] = [];
/** Reference to the Router */
readonly router = inject(Router);
}
<ng-container *ngFor="let cardBlock of cardBlockData">
<div class="heading" [style]="cardBlock.headerSize" id="{{ cardBlock.id }}">
{{ cardBlock.heading }}
</div>
<ccf-card-button-long
[longButtonItems]="cardBlock.cardData"
(cardRoutes)="router.navigate([$event.route])"
></ccf-card-button-long>
</ng-container>
./card-with-header.component.scss
:host {
.heading {
font-weight: 300;
font-size: 2.25rem;
line-height: 2.75rem;
letter-spacing: 0.005rem;
padding-bottom: 2rem;
}
}