There is a component where I need to pass specific data to the child components within an ngFor loop using attributes. Depending on the attribute, I want to style these child components accordingly.
Code
testimonials.component.html - (Parent component)
<ng-template ngFor let-person="$implicit" [ngForOf]="peopleAsPreviousCurrentAndNextTriplets" let-i=index let-last=last>
<app-card
[prevCard] ="last ? person.previous : null"
[currentCard] ="last ? person.current : null"
[nextCard] ="last ? person.next : null"
></app-card>
</ng-template>card.component.ts - (Child component)
import {Component, Input, ViewChild} from '@angular/core';
import {Person} from '../testimonials/person';
@Component({
selector: 'app-card',
templateUrl: './card.component.html',
styleUrls: ['./card.component.scss']
})
export class CardComponent {
@Input() decrement: Number;
@Input() defaultDiff: Number;
@Input() currentCard: Person;
@Input() prevCard: Person;
@Input() nextCard: Person;
@ViewChild('card') card;
constructor() { }
}I want to apply styling to <app-card> based on the [currentCard] attribute.
child.component.sass
:host {
&[currentCard] {
.testimonials__card-container {
background-color: black;
}
}
}However, the above style does not seem to be taking effect.
Your assistance would be greatly appreciated.
Thank you.
EDIT
Here's my illustration of the arranged cards: