View does not update when calling function from other component Angular + NativeSript(6)

Question

View does not update when calling function from other component Angular + NativeSript. i'm calling a function to get some data and render but the data is not displayed in the component but in console log i can see the data is there. What i'm missing here?

My Tabcomponent here a call the function from other component:

@Component({
  providers: [CartoesComponent],
  selector: "ns-tabs",
  templateUrl: "./tabs.component.html",
  styleUrls: ["./tabs.component.css"],
  moduleId: module.id
})
export class TabsComponent implements OnInit {
  tabSelectedIndex: number;

  constructor(private card: CartoesComponent) {
    this.tabSelectedIndex = 0;
  }

  onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
    if (args.oldIndex !== -1) {
      const newIndex = args.newIndex;
      if (newIndex === 0) {
        // the function im calling 
        this.card.getCards();
      }
    }
  }
}

My component where I have the function I'm calling:

@Component({
  selector: "Cartoes",
  moduleId: module.id,
  templateUrl: "./cartoes.component.html",
  styleUrls: ["./cartoes.css"]
})
export class CartoesComponent implements OnInit {
  processing = false;
  cardsData: any = null;
  cardsDetails: any = null;

  constructor() {}

  getCards(): void {
    this.processing = true;

    this.service.cardsWallet().subscribe((res) => {
      this.cardsData = res;

      this.cardsData.forEach((data: any) => {
        this.cardsDetails = data.cards;
      });

      // DISMISS LOADER
      this.processing = false;
    }, (err) => {
      this.processing = false;
      console.log(err);
    });
  }
}

My view component xml(html). My view stays blank, but in console.log i can see the data. And if call the function on ngOnInit it shows de view but when an call the function again it does not update.

<Carousel debug="false" height="200" width="100%" indicatorOffset="0, 0" indicatorColor="#00E676" finite="true" bounce="true" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="SCALE" indicatorColorUnselected="#000" [items]="cardsDetails">
    <CarouselItem verticalAlignment="middle" *ngFor="let card of cardsDetails">
        <AbsoluteLayout width="auto">
            <!-- CARD IMG -->
            <Image src="~/images/cartoes/card4.png" width="325" class="card-img"></Image>
            <Image *ngIf="card?.cardBrand.cardBrandName === 'Mastercard'" src="~/images/cartoes/mastercard.png" width="50" class="card-img-detail"></Image>
            <Image *ngIf="card?.cardBrand.cardBrandName === 'Visa'" src="~/images/cartoes/visa.png" width="50" class="card-img-detail"></Image>
            <!-- CARD INFO -->
            <label text="{{card?.cardDescription}}" class="card-info-description"></label>
            <label text="{{card?.cardNumber}}" class="card-info-number"></label>
            <label text="{{card?.expirityDate | date:'MM/yy'}}" class="card-info-validade" textWrap="true"></label>
            <label text="{{card?.cardHolderName}}" class="card-info-nome" textWrap="true"></label>
        </AbsoluteLayout>
    </CarouselItem>
</Carousel>

Please add the console.log statement and output, which you are mentioning. — Alessandro Santamaria
@AlessandroSantamaria the console.log is the data comming from the service http and it shows only there not in the view its array of data — Kevin Dias
Can you share a Playground sample where the issue can be reproduced? — Manoj
i cant acess the variables inside it when i call from other component — Kevin Dias
When you say: "And if call the function on ngOnInit" ngOnInit of which component do you mean? — Sergey Mell

Sergey Mell Sergey Mell · Accepted Answer · 2019-08-18T16:51:49

Actually, you've injected your component though and declared it as provider.

  constructor(private card: CartoesComponent) {
    this.tabSelectedIndex = 0;
  }

This means that Angular created an instance of this component class and you can call its methods.

However, this instance does not refer to any really rendered components and is not bound to any template in your view. Thus, calling component instance methods should not affect anything in your case.

The correct way should be either refer to the component via ViewChild decorator (if it is located inside parent component). In this case, you operate with the exact rendered component and affect its template. Otherwise, you should use some service for communicating between components or sharing common data. Here you can find some comprehensive instructions regarding component communications.

The only thing, for now, I have no idea why calling ngOnInit handles situation because it shouldn't. I'll update my answer once I figure out what the case.

View does not update when calling function from other component Angular + NativeSript(6)

1 Answers