When trying to display a p-tabMenu element in the browser, nothing is shown (white screen). Another PrimeNg element, p-dropdown, is displayed when p-tabMenu is not in the html-File, if both are present both become invisible. When checking the element in the Firefox dev-tools inspector, the element is shown to be size 0x19 pixels. When changing the css with height or min-height values, these values are displayed in Firefox but the element stays invisible.
Complete html-Code:
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>
<p-tabMenu [model]="gfg"></p-tabMenu>
Component.ts-Code:
import {Component, OnInit} from '@angular/core';
import {MenuItem, PrimeNGConfig} from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
cities: City[];
selectedCity: City;
gfg: MenuItem[];
constructor() {
this.cities = [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
];
this.selectedCity={name: 'New York', code: 'NY'};
this.gfg = [
{label: 'HTML'},
{label: 'AngularJS'},
{label: 'ReactJS'},
{label: 'PrimeNG'}
];
}
ngOnInit() {
this.gfg = [
{label: 'HTML'},
{label: 'AngularJS'},
{label: 'ReactJS'},
{label: 'PrimeNG'}
];
}
}
interface City {
name: string,
code: string
}
styles.css includes:
@import '~primeicons/primeicons.css';
@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/saga-blue/theme.css';
I followed PrimeNg setup closely from https://www.primefaces.org/primeng/#/setup and the dropdown menu on its own works. I tested changing some css values but no luck. I don't even know where to begin with this. I appreciate any help, i already spent many hours trying to fix this.
