RadListView doesn't work in directive/component

ios

#1

Guys, I have a problem with my application.
Seems like nobody had this problem before and I hope I’ll find a workaround here.
The problem is only in iOS.

I decided to change my app, instead of using <router-outlet name="contacts"></router-outlet inside of tab in TabView I use the selector created by component (in my case app-contacts).

The change worked perfectly until I tried to verify the RadListView. The list is displayed correctly, can scroll, filter contacts, sort, etc.
When I click on a contact (as you can see (tap)="goToProfile(contact)") the app takes me to a router with a screen where I can view the contact information. When I get back, the list is broken.

home.component.html

<TabView (selectedIndexChanged)="onHomeSelectedIndexChanged($event)" [selectedIndex]="selectedIndex" selectedTabTextColor="#199DA4">

  <StackLayout *tabItem="{title: 'Contacts', iconSource: 'res://contacts_ios_tab'}">
    <app-contacts></app-contacts>
  </StackLayout>

  //....
</TabView>

contacts.component.html

// some stuff here 
<RadListView #contactsListView [items]="contactList" class="list-group" pullToRefresh="true" row="1" (pullToRefreshInitiated)="onPullToRefreshInitiated($event)" (scrollStarted)="removeKeyboard()" (scrollEnded)="setScrollOffset($event)" style="height: 100%">
    <ng-template tkListItemTemplate let-contact="item" let-index="index">
        <StackLayout>
            <GridLayout columns="25, 10, *" class="list-group-item" [class.contact-legacy]="isLegacyContact(contact)">
                <ng-template [ngIf]="!isLegacyContact(contact)">
                    <WebImage stretch="aspectFill" src="{{ contact.imageUri }}" placeholder="res://contacts_icon" width="25" height="25" [rounded]="true" (tap)="goToProfile(contact)"></WebImage>
                </ng-template>
                <ng-template [ngIf]="isLegacyContact(contact)">
                    <WebImage stretch="aspectFill" src="res://add_icon" width="25" height="25" [rounded]="true" (tap)="inviteContact(contact)"></WebImage>
                </ng-template>
                <Label col="2" [text]="getContactDisplayName(contact)" (tap)="goToProfile(contact)"></Label>
            </GridLayout>
        </StackLayout>
    </ng-template>

</RadListView>
// some stuff here

contacts.component.ts

goToProfile(contact: UserContactView) {
        let params: Params = {
            id: contact.id
        };
        this.routerExtensions.navigate(["/contact/view"], {queryParams: params});
    }

package.json

{
  "nativescript": {
    "tns-ios": {
      "version": "3.3.0"
    },
    "tns-android": {
      "version": "3.2.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.1",
    "@angular/common": "~4.4.1",
    "@angular/compiler": "~4.4.1",
    "@angular/core": "~4.4.1",
    "@angular/forms": "~4.4.1",
    "@angular/http": "~4.4.1",
    "@angular/platform-browser": "~4.4.1",
    "@angular/router": "^4.1.3",
    "core-js": "2.5.0",
    "emoji-strip": "^1.0.1",
    "moment": "^2.19.1",
    "nativescript-angular": "^3.1.3",
    "nativescript-appversion": "1.4.1",
    "nativescript-bottom-navigation": "^1.1.2",
    "nativescript-camera": "3.0.2",
    "nativescript-cardview": "2.0.2",
    "nativescript-checkbox": "^3.0.1",
    "nativescript-contacts-lite": "^0.2.4",
    "nativescript-email": "1.5.1",
    "nativescript-globalevents": "^1.1.2",
    "nativescript-imagecropper": "^0.1.2",
    "nativescript-imagepicker": "^4.0.1",
    "nativescript-iqkeyboardmanager": "1.1.0",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-localstorage": "1.1.5",
    "nativescript-masked-text-field": "^1.0.2",
    "nativescript-mixpanel": "2.0.1",
    "nativescript-ngx-fonticon": "2.2.3",
    "nativescript-onesignal": "^1.0.7",
    "nativescript-pager": "^5.0.5",
    "nativescript-permissions": "1.2.3",
    "nativescript-phone": "1.3.1",
    "nativescript-pro-ui": "^3.2.0",
    "nativescript-status-bar": "1.1.1",
    "nativescript-theme-core": "1.0.4",
    "nativescript-timedatepicker": "1.2.1",
    "nativescript-toast": "1.4.6",
    "nativescript-trace-raven": "1.0.0",
    "nativescript-web-image-cache": "^4.2.2",
    "nativescript-webworkers": "^1.0.4",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.4.3",
    "tns-core-modules": "^3.3.0",
    "tns-core-modules-widgets": "^3.3.0",
    "zone.js": "0.8.17"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~4.4.1",
    "@ngtools/webpack": "~1.6.0",
    "babel-traverse": "6.4.5",
    "babel-types": "6.4.5",
    "babylon": "6.4.5",
    "copy-webpack-plugin": "~4.0.1",
    "extract-text-webpack-plugin": "~3.0.0",
    "lazy": "1.0.11",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-typescript": "0.5.0",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.0",
    "tns-platform-declarations": "3.1.1",
    "typescript": "~2.3.4",
    "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
    "webpack": "~3.2.0",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}

Do you have any idea ??