title: Primeng Component UI issues
body: <p>I am working on PrimeNG components. But m having issues with UI display on the web browser.</p>
  
  <p>Right now, I want to display static dropdown. I have took reference from <a href="https://www.primefaces.org/primeng/#/dropdown" rel="nofollow noreferrer">PrimeNG</a>. The following code is to display that component.</p>
  
  <p><strong>HTML File</strong></p>
  
  <pre><code>&lt;h3 class="first"&gt;Single&lt;/h3&gt;
  &lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"&gt;&lt;/p-dropdown&gt;
  &lt;p&gt;Selected City: {{selectedCity ? selectedCity.name : 'none'}}&lt;/p&gt;
  </code></pre>
  
  <p><strong>Component File</strong></p>
  
  <pre><code>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() {
  
    }
  }
  </code></pre>
  
  <p>And in Module file, I have imported -</p>
  
  <pre><code>import { DropdownModule } from 'primeng/primeng';
  
  
  imports: [
  DropdownModule
  ]
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="assets/stylesheet/bootstrap.min.css"&gt;
  
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  </code></pre>
  
  <p>But when I run project, it is not showing me what they have done in <strong>PrimeNG Dropdown example</strong> instead of that m getting this result</p>
  
  <p><a href="https://i.stack.imgur.com/9G2mJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9G2mJ.png" alt="Image"></a></p>
  
  <p>Can anyone guide or help me solving where I need to do changes. Thanks in advance.</p>