how to style angular 4 component with an attribute?

Question

I have a component that in which I'd like to pass certain data to the child component in ngFor through attribute. And based on attribute I'd like to ultimately style those child-components.

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() { }
}

And I would like to style <app-card> with a [currentCard] attribute.

child.component.sass

:host {
  &[currentCard] {
    .testimonials__card-container {
      background-color: black;
    }
  }
}

Not sure why the above style is not being applied.

Please help.

Thanks

EDIT

Here's to visualise my tacked cards:

Answer 1

Don't mix up html attributes and Angular bindings. What would work is something like this:

in the parent view:

   <app-card [class.currentcard]= "last"
               [prevCard]      ="last ? person.previous : null"
               [currentCard]   ="last ? person.current : null"
               [nextCard]      ="last ? person.next : null">
    </app-card>

and in the stylesheet of the child:

:host(.currentcard) {
   background-color: black;
}