[Tabs][Angular] Can not create Tabs dynamic via code

[minhson95th]

Make sure to check the demo app(s) for sample usage

Make sure to check the existing issues in this repository

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Which platform(s) does your issue occur on?

• Android

  Please, provide the following version numbers that your issue occurs with:

• CLI: 8.5.3

• Cross-platform modules: 8.5.9

• Plugin(s): @nativescript-community/ui-material-tabs": "^7.1.4

Please, tell us how to recreate the issue in as much detail as possible.

I have try create Tabs dynamic via code but it's have error

Is there any code involved?

.ts file

import { TabStrip, TabContentItem, TabStripItem, Tabs } from "@nativescript-community/ui-material-tabs";

 @ViewChild('layout', { static: false}) layout: ElementRef;

 ngOnInit(): void {
    // Init your component properties here.
    const tabStripItems = [];
    const contentItems = [];
    let tabStripItem = new TabStripItem();
    tabStripItem.title = "TITLE";
    tabStripItems.push(tabStripItem);
    let tabContentItem = new TabContentItem();
    tabContentItem.content = this.createContent();
    contentItems.push(tabContentItem)
    let tabs = new Tabs();
    let tabStrip = new TabStrip();
    tabStrip.items = tabStripItems;
    tabs.tabStrip = tabStrip;
    tabs.items = contentItems;
    this.layout.nativeElement.addChild(tabs);

  }
  createContent() {
    let label = new Label();
    label.text = "My label"
    const stack = new StackLayout();
    stack.verticalAlignment = "middle";
    stack.backgroundColor = "blue"
    stack.addChild(label);
    return stack;
  }

.html file

 <StackLayout #layout>

 </StackLayout>

This is error

JS: CONSOLE ERROR: ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'indexOf')

  JS: TypeError: Cannot read properties of undefined (reading 'indexOf')

  JS:     at file: src\webpack:\app\node_modules\@nativescript-community\ui-material-core-tabs\tab-navigation-base\index.js:70:0

  JS:     at Array.forEach (<anonymous>)

  JS:     at Tabs.onItemsChanged (file: src\webpack:\app\node_modules\@nativescript-community\ui-material-core-tabs\tab-navigation-base\index.js:66:0)

  JS:     at Tabs.onItemsChanged (file: src\webpack:\app\node_modules\@nativescript-community\ui-material-core-tabs\tab-navigation\index.android.js:155:0)

  JS:     at valueChanged (file: src\webpack:\app\node_modules\@nativescript-community\ui-material-core-tabs\tab-navigation-base\index.js:285:0)

  JS:     at Property.set [as items] (file: src\webpack:\app\node_modules\@nativescript\core\ui\core\properties\index.js:178:0)

  JS:     at HomeComponent.ngOnInit (file: src\webpack:\app\src\app\home\home.component.ts:75:14)

  JS:     at callHook (file: src\webpack:\app\node_modules\@angular\core\fesm2015\core.mjs:2418:0)

  JS:     at callHooks (file: src\webpack:\app\node_modules\@angular\core\fesm2015\core.mjs:2387:0)

  JS:     at executeInitAndCh...