0

I have carousel in Angular 2 and I want to add transitions to it. I did Tour of Heroes tutorial and so I have in app.component.ts:

<carousel [interval]="5000" [noWrap]="noLoopSlides">
      <hero *ngFor="let hero of heroes; let index=index" [active]="hero.active" [inactive]="hero.inactive" class="item fill">
        <img [src]="hero.image" style="margin:auto;">
        <div class="carousel-caption">
          <h3 style="background-color: transparent;color: white;">Slide {{index + 1}}</h3>
        </div>
      </hero>
    </carousel>

and the class of hero element changes from item fill carousel-item active to item fill carousel-item inactive with time interval and only the active one is displayed. I would like to make the transition from active to inactive, but based on Documentation I need to use trigger [@heroState]="hero.state". Is there a way, to change state based on class?

Leukonoe
  • 649
  • 2
  • 10
  • 29
  • You can't describe three states (active, inactive, inTransition) with booleans (true/false)... You could try using `[ngClass]="hero.state"` and update your code so `hero.state` can hold more then two (active/inactive) values... – Sasxa Oct 04 '16 at 14:51
  • Yes, I do understand that although is there a way of saying `if active==True then hero.state = active`, otherwise `hero.state = inactive`? – Leukonoe Oct 04 '16 at 14:58
  • `hero.state = active === true ? 'active' : 'inactive'` maybe? – Sasxa Oct 04 '16 at 15:01

0 Answers0