Primeng Component UI issues

Question

I am working on PrimeNG components. But m having issues with UI display on the web browser.

Right now, I want to display static dropdown. I have took reference from PrimeNG. The following code is to display that component.

HTML File

<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown>
<p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>

Component File

import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/primeng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  cities: SelectItem[];

  selectedCity: string;
  constructor() {
    this.cities = [];
    this.cities.push({ label: 'Select City', value: null });
    this.cities.push({ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } });
    this.cities.push({ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } });
    this.cities.push({ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } });
    this.cities.push({ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } });
    this.cities.push({ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } });

  }
  ngOnInit() {

  }
}

And in Module file, I have imported -

import { DropdownModule } from 'primeng/primeng';


imports: [
DropdownModule
]

index.html

<link rel="stylesheet" type="text/css" href="assets/stylesheet/bootstrap.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

But when I run project, it is not showing me what they have done in PrimeNG Dropdown example instead of that m getting this result

Can anyone guide or help me solving where I need to do changes. Thanks in advance.

Answer 1

Try like this :

npm install primeng

npm install primeng --save

add style inside the .angular-cli.json

.angular-cli.json

"styles": [
    "../node_modules/primeng/resources/themes/omega/theme.css",
    "../node_modules/primeng/resources/primeng.min.css"
]

module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {DropdownModule} from 'primeng/primeng';

@NgModule({
    imports: [
        DropdownModule,
        BrowserAnimationsModule
    ],
})