The next Angular item we’ll test is a component. This is going to be very similar to the directive we just tested. But, even though it’ll look almost the exact same, I think it’ll be worth going through the exercise of testing the component.
This component’s purpose is to display a list of alerts that we want to show to our users. There is a related service that adds and removes the alerts and passes them along using a Subject
. It is slightly complicated because we’re going to use a TemplateRef
to pass in the template that the ngFor
loop should use for the alerts. That way the implementing application can determine what the alerts should look like. Here’s the component:
@Component({
selector: 'alerts-display',
template: '<ng-template ngFor let-alert [ngForOf]="alerts$ | async" [ngForTemplate]="alertTemplate"></ng-template>',
styleUrls: ['./alerts-display.component.scss'],
})