Adding tabview using builder.parse(xml)


#1

Hello,

I am trying to add a tabview with dynamic tabviewitems with the same layout for each item. View is empty. If i take output string and add it to the html file, tabview is displayed correctly.

ticker.html

<StackLayout #container>

tickers.ts

@ViewChild(‘container’) container: ElementRef;

ngOnInit() {

let xml = <TabView #tabView>;

    // this.tabviewitems = [];

    for (let x = 0; x < tickers.length; x++) {
        xml += `
           <StackLayout *tabItem="{title: '` + tickers[x].name + `'}">
                <Label text="` + tickers[x].symbol + `"></Label>
            </StackLayout>                </StackLayout>
        `;
    }

    xml += "</TabView>";
    console.log(xml);

    const component = builder.parse(xml);
    this.container.nativeElement.addChild(component); 

}

package.json

@angular/common”: “4.0.0”,
"@angular/compiler": “4.0.0”,
"@angular/core": “4.0.0”,
"@angular/forms": “4.0.0”,
"@angular/http": “4.0.0”,
"@angular/platform-browser": “4.0.0”,
"@angular/platform-browser-dynamic": “4.0.0”,
"@angular/router": “4.0.0”,
“nativescript-angular”: “~3.0.0”,
“nativescript-carousel”: “^2.4.2”,
“nativescript-pager”: “^4.0.1”,
“nativescript-telerik-ui”: “^2.0.1”,
“nativescript-theme-core”: “~1.0.4”,
“reflect-metadata”: “~0.1.8”,
“rxjs”: “~5.2.0”,
“tns-core-modules”: “~3.0.1”,
“zone.js”: “~0.8.5”

Thanks for the help,
Raghu


#2

I figured it out. ng-template did the trick.

    <TabView #tabView [selectedIndex]="currentPagerIndex" (selectedIndexChanged)="tabViewIndexChanged($event)">
        <ng-template ngFor let-item [ngForOf]="tickers">
            <StackLayout *tabItem="{title: item.name}" class="details">
            </StackLayout>
        </ng-template>
    </TabView>

Raghu