src/app/components/footer/funding/funding.component.ts
Displays a list of funders
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cns-funding |
| imports |
HraCommonModule
|
| templateUrl | ./funding.component.html |
| styleUrl | ./funding.component.scss |
Properties |
|
Inputs |
| funders | |
Type : FunderId[]
|
|
| Required : true | |
|
Funders to display |
|
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { HraCommonModule } from '@hra-ui/common';
import { FUNDERS } from '../static-data/parsed';
import { FunderId } from '../types/funders.schema';
/** Displays a list of funders */
@Component({
selector: 'cns-funding',
imports: [HraCommonModule],
templateUrl: './funding.component.html',
styleUrl: './funding.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FundingComponent {
/** Funders to display */
readonly funders = input.required<FunderId[]>();
/** Associated data for each funder displayed */
protected readonly fundersData = computed(() => {
const ids = new Set(this.funders());
return FUNDERS.filter((item) => ids.has(item.id));
});
}
<ng-container hraFeature="funder">
<span class="title">Thank you to our generous sponsors</span>
<div class="funders">
@for (funder of fundersData(); track funder.name) {
<a hraClickEvent class="funder" target="_blank" rel="noopener noreferrer" [attr.href]="funder.link">
<img [attr.src]="funder.image | assetUrl" [alt]="funder.name" />
</a>
}
</div>
</ng-container>