This code snippet represents a component that needs to be included in other components:
<div class="row">
<div class="col-12 [...]" *ngFor="let course of courses">
<div class="card">
[...]
</div>
</div>
</div>
The issue arises when I need to limit the data displayed by applying a | slice:0:4 filter within the ngFor loop in one specific parent component. To address this, I restructured the child component so that it receives data from the parent component. By moving the .row and .col-12 divs into the parent components, I can now apply the slice filter where needed.
<div class="row">
<div class="col-12 [...]" *ngFor="let course of courses | slice:0:4">
<app-child-component [course]="course"></app-child-component>
</div>
</div>
As a result, the child component is now simplified:
<div class="card">
[...]
</div>
However, a new challenge arises as I need to apply CSS classes to the child component's .row element universally, leading to repetitive modifications in each parent component. This approach also deviates from Angular's intended use of components.
Is there a way to utilize the | slice filter and pass it down from a single parent component to the child component similar to how data is passed with [course]="course" in
<app-component [course]="course"></app-component>I hope this explanation clarifies the situation. Thank you.