NativeScript / NativeScript/angular

TabView not rendering

Open
#147 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
55
Forks
13
Avg merge
16m
Merged PRs (30d)
1

Description

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

{
 "name": "stackblitz-nativescript-angular",
 "main": "./src/main.ts",
 "version": "1.0.0",
 "private": true,
 "dependencies": {
   "@angular/animations": "~19.0.0",
   "@angular/common": "~19.0.0",
   "@angular/compiler": "~19.0.0",
   "@angular/core": "~19.0.0",
   "@angular/forms": "~19.0.0",
   "@angular/platform-browser": "~19.0.0",
   "@angular/platform-browser-dynamic": "~19.0.0",
   "@angular/router": "~19.0.0",
   "@nativescript/angular": "^19.0.0",
   "@nativescript/core": "~8.8.0",
   "rxjs": "~7.8.0",
   "zone.js": "~0.15.0"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "~19.0.0",
   "@angular/compiler-cli": "~19.0.0",
   "@nativescript/preview-cli": "^1.0.14",
   "@nativescript/stackblitz": "^0.0.8",
   "@nativescript/tailwind": "^2.1.0",
   "@nativescript/types": "~8.8.0",
   "@nativescript/webpack": "~5.0.0",
   "@ngtools/webpack": "~19.0.0",
   "tailwindcss": "~3.4.0",
   "typescript": "~5.6.0"
 }
}

Describe the bug

Adding TabView UI component doesn't render on the page.

To Reproduce

Start new project by following the docs: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular. or use this stackblitz:
https://stackblitz.com/edit/nativescript-stackblitz-templates-t6bujanb?file=src%2Fapp%2Fitem%2Fitems.component.html,src%2Fapp%2Fitem%2Fitems.component.ts,src%2Fapp%2Fapp.routes.ts&title=NativeScript%20Starter%20Angular

Modify items.component.html

<ActionBar title="My App"> </ActionBar>

<GridLayout>
  <TabView>
    <TabViewItem title="First">
      <Label
        text="First Tab Content"
        textAlignment="center"
        verticalAlignment="center"
      ></Label>
    </TabViewItem>
    <TabViewItem title="Second">
      <Label
        text="Second Tab Content"
        textAlignment="center"
        verticalAlignment="center"
      ></Label>
    </TabViewItem>
    <TabViewItem title="Third">
      <Label
        text="Third Tab Content"
        textAlignment="center"
        verticalAlignment="center"
      ></Label>
    </TabViewItem>
  </TabView>
</GridLayout>

Expected behavior
Tab views to load like the bellow:

Image

Sample project

Additional context

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked StackBlitz and the reproduction in src/app/item/items.component.html, then compare it with the master-detail Angular tutorial. Run the sample with the listed Angular and NativeScript versions and trace why the TabView does not appear. Done means the three tabs render with their labels and content as shown in the expected image.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.