Changing class at runtime doesn't have an effect


#1

I have a little calendar app where I can scroll between the events. I use the nativescript-ngx-slides plugin. I have implemented a slide indicator by my self but as soon as I slide, the indicator stays unchanged even though I add a new class to the Indicator label.

What I’m doing wrong?

Here’s my code:
HTML:

<AbsoluteLayout>
  <StackLayout *ngIf="calendar" orientation="vertical" class="timeline" height="120">
    <slides [pageIndicators]="true" pageHeight="100" (changed)="onSlideChanged($event)">
      <slide class="event" *ngFor="let evt of calendar?.events; index as idx">
        <StackLayout #eventItem orientation="vertical">
          <Label class="next" [text]="idx === 0 ? 'Nächster Termin' : ''"></Label>
          <Label class="title" text="{{evt.summary}}"></Label>
          <Label class="time" text="{{evt.start | date:'dd.MM.y HH:mm'}}"></Label>
          <Label class="location" text="{{evt.location}}"></Label>
        </StackLayout>
      </slide>
    </slides>
  </StackLayout>
  <StackLayout orientation="horizontal" class="indicator-list">
    <Label class="indicator" *ngFor="let evt of calendar?.events" text="●" [class.displayed]="evt.displayed"></Label>
  </StackLayout>
</AbsoluteLayout>

Typescript:

public onSlideChanged(index: number): void {
    if (!this.calendar || !this.calendar.events || this.calendar.events.length === 0) {
      return;
    }
    console.log("Update display");
    this.updateDisplay(index);
  }

  private updateDisplay(index: number) {
    this.calendar.events.forEach((evt, idx) => {
      console.log(`${idx === index}`);
      evt.displayed = idx === index;
    });
  }

Sass

AbsoluteLayout {
  width: 100%;
  height: 100%;
}
.indicator-list {
  position: absolute;
  top: 100;
  left: 00;
  width: 100%;
  color: #ffffff;
  text-align: center;
  align-content: center;

  .indicator {
    font-weight: 100;
    font-size: 14;
    &.displayed {
      font-weight: bold;
      color: red;
      font-size: 16;
    }
  }
}

.slide-indicator-inactive{
  background-color: #fff;
  opacity : 0.4;
  width : 10;
  height : 10;
  margin-left : 2.5;
  margin-right : 2.5;
  margin-top : 0;
  border-radius : 5;
}

.slide-indicator-active{
  background-color: #fff;
  opacity : 0.9;
  width : 10;
  height : 10;
  margin-left : 2.5;
  margin-right : 2.5;
  margin-top : 0;
  border-radius : 5;
}

.timeline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ffffff;
  text-align: center;

  .next {
    margin-bottom: 5px;
    margin-bottom: 10px;
  }

  .event {
    width: 100%;
    
    .title {
      font-size: 20;
    }

    .time {
      font-size: 16;
    }

    .location {
      font-size: 14;
      margin-bottom: 10px;
    }
  }
}

#2

Hey @NCC-2909-M,

Sorry you didn’t hear back on this one. As is, it’s really tricky to get this situation going from the code you provided. I’m getting errors on this.calendar for example that I’m not sure how to resolve.

Any chance you could get this working in NativeScript Playground? I got things started by adding in your markup and TypeScript, and also installing the nativescript-ngx-slides plugin (https://play.nativescript.org/?template=play-ng&id=oWLGDf&v=2), but I’m not sure how to set things up to recreate the problem you’re seeing.

Thanks, and sorry again for the late reply.


#3

Hey @tjvantoll,

thanks for your reply. The playground is great if I had heard of it before I had done the code there. I fixed the code so there are no errors anymore. But unfortunately the swiping of the component doesn’t work in the playground. In my App it works.

You can find the new Version here.

(https://play.nativescript.org/?template=play-ng&id=oWLGDf&v=4)

Thanks in advance


#4

@NCC-2909-M
I can only see the default angular app when I visit the playground link you sent


#5

@multishiv19

Strange. I have “changed” the link. At least I override the exinsting one with exact the same value and put brackets around it. On my browser it works now. If you still have trouble use @tjvantoll’s link and replace the v=2 parameter with v=4


#6

@NCC-2909-M
Have you tried going through the demo app for that plugin?
https://github.com/TheOriginalJosh/nativescript-ngx-slides/tree/master/demo


#7

It seems to be a bug with the nativescript-ngx-slides. After I removed them and use a swipe on a simple StackLayout and now it’s working.