title: typescript nativescript carousel not working
body: <p>I am trying to simulate a carousel on my home page with my featured elements. It is getting the featured elements but the last ActivityIndicator in my html doesn't stop and I cannot swipe to the other elements.</p>
  
  <p>I am new to nativescript and typescript </p>
  
  <p>This is my home.component.ts</p>
  
  <pre><code>    import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
  
  //import { TNSFontIconService } from 'nativescript-ngx-fonticon';
  import { Page } from "ui/page";
  import { View } from "ui/core/view";
  import { SwipeGestureEventData, SwipeDirection } from "ui/gestures";
  import * as enums from "ui/enums";
  
  import { Cabin } from '../shared/cabin';
  import { CabinService } from '../services/cabin.service';
  import { House } from '../shared/house';
  import { HouseService } from '../services/house.service';
  import { Ecoactivity } from '../shared/ecoactivity';
  import { EcoactivityService } from '../services/ecoactivity.service';
  import { DrawerPage } from '../shared/drawer/drawer.page';
  
  
  @Component({
      selector: 'app-home',
      moduleId: module.id,
      templateUrl: './home.component.html',
      // styleUrls: ['./home.component.css']
  })
  export class HomeComponent extends DrawerPage implements OnInit {
  
      cabin: Cabin;
      house: House;
      ecoactivity: Ecoactivity;
      cabinErrMess: string;
      houseErrMess: string;
      ecoactivityErrMess: string;
  
      showLeftCard: boolean = true;
      showMiddleCard: boolean = false;
      showRightCard: boolean = false;
      leftCard: View;
      middleCard: View;
      rightCard: View;
  
  
  
      constructor(private cabinservice: CabinService,
          private houseservice: HouseService,
          private ecoactivityservice: EcoactivityService,
          private changeDetectorRef: ChangeDetectorRef,
          private page: Page,
          @Inject('BaseURL') private BaseURL) {
          super(changeDetectorRef);
      }
  
      ngOnInit() {
          this.cabinservice.getFeaturedCabin()
              .subscribe(cabin =&gt; this.cabin = cabin,
                  errmess =&gt; this.cabinErrMess = &lt;any&gt;errmess);
          this.houseservice.getFeaturedHouse()
              .subscribe(house =&gt; this.house = house,
                  errmess =&gt; this.houseErrMess= &lt;any&gt;errmess);
          this.ecoactivityservice.getFeaturedEcoactivity()
              .subscribe(ecoactivity =&gt; this.ecoactivity = ecoactivity,
                  errmess =&gt; this.ecoactivityErrMess = &lt;any&gt;errmess);
      }
  
  
      onSwipe(args: SwipeGestureEventData) {
          console.log("Swipe Direction: " + args.direction);
  
          if (args.direction === SwipeDirection.left) {
              this.animateLeft();
          }
          else if (args.direction === SwipeDirection.right) {
              this.animateRight();
          }
      }
  
      animateLeft() {
  
          if (this.cabin &amp;&amp; this.house &amp;&amp; this.ecoactivity) {
              this.leftCard = this.page.getViewById&lt;View&gt;('leftCard');
              this.middleCard = this.page.getViewById&lt;View&gt;('middleCard');
              this.rightCard = this.page.getViewById&lt;View&gt;('rightCard');
  
              if (this.showLeftCard) {
                  this.rightCard.animate({
                      translate: { x: 2000, y: 0 }
                  })
                      .then(() =&gt; {
                          this.leftCard.animate({
                              translate: { x: -2000, y: 0 },
                              duration: 500,
                              curve: enums.AnimationCurve.easeInOut
                          })
                              .then(() =&gt; {
                                  this.showLeftCard = false;
                                  this.showMiddleCard = true;
                                  this.middleCard.animate({
                                      translate: { x: 0, y: 0 },
                                      duration: 500,
                                      curve: enums.AnimationCurve.easeInOut
                                  });
                              });
                      });
              }
              else if (this.showMiddleCard) {
                  this.leftCard.animate({
                      translate: { x: 2000, y: 0 },
                      duration: 500
                  })
                      .then(() =&gt; {
                          this.middleCard.animate({
                              translate: { x: -2000, y: 0 },
                              duration: 500,
                              curve: enums.AnimationCurve.easeInOut
                          })
                              .then(() =&gt; {
                                  this.showMiddleCard = false;
                                  this.showRightCard = true;
                                  this.rightCard.animate({
                                      translate: { x: 0, y: 0 },
                                      duration: 500,
                                      curve: enums.AnimationCurve.easeInOut
                                  });
                              });
                      });
              }
              else if (this.showRightCard) {
                  this.middleCard.animate({
                      translate: { x: 2000, y: 0 },
                      duration: 500
                  })
                      .then(() =&gt; {
                          this.rightCard.animate({
                              translate: { x: -2000, y: 0 },
                              duration: 500,
                              curve: enums.AnimationCurve.easeInOut
                          })
                              .then(() =&gt; {
                                  this.showRightCard = false;
                                  this.showLeftCard = true;
                                  this.leftCard.animate({
                                      translate: { x: 0, y: 0 },
                                      duration: 500
                                  });
                              });
                      });
              }
          }
      }
  
      animateRight() {
  
          if (this.cabin &amp;&amp; this.house &amp;&amp; this.ecoactivity) {
              this.leftCard = this.page.getViewById&lt;View&gt;('leftCard');
              this.middleCard = this.page.getViewById&lt;View&gt;('middleCard');
              this.rightCard = this.page.getViewById&lt;View&gt;('rightCard');
  
              if (this.showLeftCard) {
                  this.middleCard.animate({
                      translate: { x: -2000, y: 0 },
                      duration: 500
                  })
                      .then(() =&gt; {
                          this.leftCard.animate({
                              translate: { x: 2000, y: 0 },
                              duration: 500,
                              curve: enums.AnimationCurve.easeInOut
                          })
                              .then(() =&gt; {
                                  this.showLeftCard = false;
                                  this.showRightCard = true;
                                  this.rightCard.animate({
                                      translate: { x: 0, y: 0 },
                                      duration: 500,
                                      curve: enums.AnimationCurve.easeInOut
                                  });
                              });
                      });
              }
              else if (this.showMiddleCard) {
                  this.rightCard.animate({
                      translate: { x: -2000, y: 0 },
                      duration: 500
                  })
                      .then(() =&gt; {
                          this.middleCard.animate({
                              translate: { x: 2000, y: 0 },
                              duration: 500,
                              curve: enums.AnimationCurve.easeInOut
                          })
                              .then(() =&gt; {
                                  this.showMiddleCard = false;
                                  this.showLeftCard = true;
                                  this.leftCard.animate({
                                      translate: { x: 0, y: 0 },
                                      duration: 500,
                                      curve: enums.AnimationCurve.easeInOut
                                  });
                              });
                      });
              }
              else if (this.showRightCard) {
                  this.leftCard.animate({
                      translate: { x: -2000, y: 0 },
                      duration: 500
                  })
                      .then(() =&gt; {
                          this.rightCard.animate({
                              translate: { x: 2000, y: 0 },
                              duration: 500,
                              curve: enums.AnimationCurve.easeInOut
                          })
                              .then(() =&gt; {
                                  this.showRightCard = false;
                                  this.showMiddleCard = true;
                                  this.middleCard.animate({
                                      translate: { x: 0, y: 0 },
                                      duration: 500
                                  });
                              });
                      });
              }
          }
      }
  
  }
  </code></pre>
  
  <p>This is my home.component.html</p>
  
  <pre><code>    &lt;StackLayout tkMainContent (swipe)="onSwipe($event)"&gt;
      &lt;GridLayout horizontalAlignment="center" verticalAlignment="top" rows="*" columns="*" height="95%"&gt;
          &lt;GridLayout id="leftCard" row="0" margin="5" rows="* auto" columns="*" *ngIf="cabin" [visibility]="showLeftCard ? 'visible' : 'collapsed'"
              class="border"&gt;
              &lt;Image row="0" stretch="aspectFill" [src]="BaseURL + cabin.image"&gt;&lt;/Image&gt;
              &lt;StackLayout padding="10" row="1"&gt;
                  &lt;Label class="h2" [text]="cabin.name"&gt;&lt;/Label&gt;
                  &lt;Label class="body" [text]="cabin.description" textWrap="true"&gt;&lt;/Label&gt;
              &lt;/StackLayout&gt;
          &lt;/GridLayout&gt;
          &lt;ActivityIndicator busy="true" *ngIf="!(cabin || cabinErrMess)" width="50" height="50" class="activity-indicator"&gt;&lt;/ActivityIndicator&gt;
          &lt;Label *ngIf="cabinErrMess" [text]="'Error: ' + cabinErrMess"&gt;&lt;/Label&gt;
          &lt;GridLayout id="middleCard" row="0" margin="5" rows="* auto" columns="*" *ngIf="house" [visibility]="showMiddleCard ? 'visible' : 'collapsed'"
              class="border"&gt;
              &lt;Image row="0" stretch="aspectFill" [src]="BaseURL + house.image"&gt;&lt;/Image&gt;
              &lt;StackLayout padding="10" row="1"&gt;
                  &lt;Label class="h2" [text]="house.name"&gt;&lt;/Label&gt;
                  &lt;Label class="body" [text]="house.description" textWrap="true"&gt;&lt;/Label&gt;
              &lt;/StackLayout&gt;
          &lt;/GridLayout&gt;
          &lt;ActivityIndicator busy="true" *ngIf="!(house || houseErrMess)" width="50" height="50" class="activity-indicator"&gt;&lt;/ActivityIndicator&gt;
          &lt;Label *ngIf="houseErrMess" [text]="'Error: ' + houseErrMess"&gt;&lt;/Label&gt;
          &lt;GridLayout id="rightCard" row="0" margin="5" rows="* auto" columns="*" *ngIf="ecoactivity" [visibility]="showRightCard ? 'visible' : 'collapsed'"
              class="border"&gt;
              &lt;Image row="0" stretch="aspectFill" [src]="BaseURL + ecoactivity.image"&gt;&lt;/Image&gt;
              &lt;StackLayout padding="10" row="1"&gt;
                  &lt;Label class="h2" [text]="ecoactivity.name"&gt;&lt;/Label&gt;
                  &lt;Label class="h3" [text]="ecoactivity.designation"&gt;&lt;/Label&gt;
                  &lt;Label class="body" [text]="ecoactivity.description" textWrap="true"&gt;&lt;/Label&gt;
              &lt;/StackLayout&gt;
          &lt;/GridLayout&gt;
          &lt;ActivityIndicator busy="true" *ngIf="!(ecoactivity || ecoactivityErrMess)" width="50" height="50" class="activity-indicator"&gt;&lt;/ActivityIndicator&gt;
          &lt;Label *ngIf="ecoactivityErrMess" [text]="'Error: ' + ecoactivityErrMess"&gt;&lt;/Label&gt;
      &lt;/GridLayout&gt;
  &lt;/StackLayout&gt;
  </code></pre>