This is the structure of my component A :

<nb-tab tabTitle="Photos" [badgeText]="centerPictures?.pictures?.length" badgePosition="top right" 
            badgeStatus="info">
              <app-center-pictures #centerPictures [center]="center"></app-center-pictures> //Child component B
</nb-tab>
<nb-tab tabTitle="Facilities" [badgeText]="centerFacilities?.facilities?.length" badgePosition="top right" badgeStatus="info">
              <app-club-facilities #centerFacilities [centerId]="center.id"></app-club-facilities> // Child component C
</nb-tab>
<nb-tab tabTitle="Prices" [badgeText]="centerPrices?.priceRules?.length" badgePosition="top right" badgeStatus="info">
              <app-center-prices #centerPrices [currency]="center.currenciesAccepted"></app-center-prices> // Child component D
</nb-tab>

I encountered this error :

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'badgeText: null'. Current value: 'badgeText: 0'

I understand the issue but I'm unsure how to resolve it. It pertains to the DOM [badgeText] and not a function within A. Thank you

EDIT: Component A

IMPORTS

@Component({
  selector: 'app-center-detail',
  templateUrl: './center-detail.component.html',
  providers: [CentersService, PictureService],
  styleUrls: ['center-detail.component.css']
})

export class CenterDetailComponent implements OnInit {

  @ViewChild ('centerPictures') centerPictures;

  get centerPicturesCount(): number {
      console.log(this.centerPictures);
      return this.centerPictures.pictures.length;
  }

  center: Center;
  errorMessage: string;
  success: string;
  edit: boolean = false;

  constructor(
    private centerService: CentersService,
    private route: ActivatedRoute,
    private pictureService: PictureService
  ) { }

  ngOnInit() {
    this.getCenter();
  }

  getCenter() {
    const id = this.route.snapshot.paramMap.get('id');
    this.centerService.getCenter(id)
      .subscribe(
        center => this.center = center,
        error => {
          if (error.status === 404) {
            this.errorMessage = "Center not found";
          }
          else {
            this.errorMessage = "An error has occured";
          }
        }
      );
  }

  processFile(image, type: string) {
    this.success = null;
    this.errorMessage = null;

    if (image.files.length) {
      let picture = new UploadPicture(image.files[0]);
      this.pictureService.addCenterPicture(this.center.id, picture.header(type))
        .subscribe(
          () => {
            this.getCenter();
            this.success = 'Header picture has been successfully changed !';
          },
          error => this.errorMessage = error.message
        )
    }
  }
}

Component B :

IMPORTS

  @Component({
    selector: 'app-center-pictures',
    templateUrl: 'center-pictures.component.html',
    providers: [PictureService],
    styleUrls: ['center-pictures.component.css']
  })
export class CenterPicturesComponent implements OnInit {

  @Input() center: Center;
  facilities: CenterFacilities[];
  pictureUrl = environment.pictureUrl + '/';

  @ViewChild('updateData') updateData: TemplateRef<any>;
  window: NbWindowRef;

  pictures: PictureData[];
  uploads: UploadPicture[] = [`enter code here`];
  uploading: boolean = false;

  error: string;
  success: string;
  disabled: boolean = false;

  constructor(
    private pictureService: PictureService,
    private centersService: CentersService,
    private windowService: NbWindowService
  ) { }

  ngOnInit() {
    this.centersService.getCenterFacilities(this.center.id)
      .translate(
        facilities => {
          this.facilities = facilities
        },
        error => this.error = error.message
      )
    this.getCenterPictures();
  }

  getCenterPictures() {
    this.pictureService.getCenterPictures(this.center.id)
      .subscribe(
        pictures => this.pictures = pictures,
        error => this.error = error.message
      );
  }

  processFile(image) {
    this.error = null;
    this.success = null;
    if (image.files.length) {
      let upload = new UploadPicture(image.files[0]);
      this.uploads.push(upload);
    }
  }

  removeUpload(upload) {
    const index = this.uploads.indexOf(upload);
    this.uploads.splice(index, 1);
  }

  uploadPictures() {
    this.error = null;
    this.success = null;
    if (!this.uploads.length) {
      return this.error = 'Please choose a picture to upload';
    }
    this.uploads.forEach((upload) => {
      this.uploading = true;
      this.pictureService.addCenterPicture(this.center.id, upload.picture())
        .subscribe(
          picture => {
            this.success = '\'' + picture.name + '\' has been uploaded';
            this.getCenterPictures();
            this.uploading = false;
          },
          error => this.error = error.message
        );
    });
    this.uploads.length = 0;
  }

  openWindow(picture: PictureData) {
    this.window = this.windowService.open(this.updateData, {
      title: picture.name,
      context: { picture: picture },
    });
  }

  updatePicture(picture: PictureData) {
    this.error = null;
    this.success = null;
    this.pictureService.updateCenterPicture(this.center.id, picture.id, {
      caption: picture.caption,
      activity: picture.activity,
      facilityId: picture.facilityId,
      isIndoor: picture.isIndoor
    }).subscribe(
      () => {
        this.success = '\'' + picture.name + '\' has been successfully updated';
        if (this.window)
          this.window.close();
      },
      error => this.error = error.message
    );
  }

  removePicture(id: string, name: string) {
    this.success = null;
    this.error = null;
    if (!this.disabled) {
      this.disabled = true;
      this.pictureService.deleteCenterPicture(this.center.id, id)
        .subscribe(
          () => {
            this.getCenterPictures();
            this.success = '\'' + name + '\' has been successfully removed';
            this.disabled = false;
          },
          error => this.error = error.message
        );
    }
  }
}