Armenvardanyan95

@Component({
  selector: 'nested-component',
  template:  `
    <div>
      <input id="nestedInput" type="text"/>
    </div>
  `
})
class NestedComponent {}

Armenvardanyan95

@Component({
  selector: 'nested-component',
  template:  `
    <div>
      <input id="nestedInput" type="text" (blur)="onBlurMethod()" />
    </div>
  `
})
class NestedComponent {
  @Output() onBlur: EventEmitter<any> = new EventEmitter();

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <p-dropDown [options]="users"></p-dropDown> // options is actually an input, a binding to a list of options for the dropdown to render
  `
})
class SomeComponent {
  users: SelectItem[] = [{value: 1, label: 'Armen Vardanyan'}, {value: 2, label: 'Also Armen Vardanyan'}];
  /* SelectItem is an interface provided by PrimeNG, which has the following form: {label: string, value: any} */
}

Armenvardanyan95

interface User {
  fullName: string;
  age: number;
  id: number;
}

@Component({
  selector: 'some-component',
  template: `<p-dropDown [options]="users"></p-dropDown>`
})

Armenvardanyan95

interface User {
  fullName: string;
  age: number;
  id: number;
}

@Component({
  selector: 'some-component',
  template: `<p-dropDown [options]="users"></p-dropDown>`
})

Armenvardanyan95

.... 
ngOnInit(){
    this.userService.getAllUsers().then((users: User[]) => {
      this.users = users.map((user: User) => {return {label: user.fullName, value: user.id} });
    }) //service returns a Promise
    //won't works, mapped to an array of SelectItem-s
}
....

Armenvardanyan95

...
ngOnInit(){
    this.userService.getAllUsers().then((users: User[]) => {
      this.users = users.map((user: User) => {return {label: user.fullName, value: user.id} });
    }) //service returns a Promise
    //this works, mapped to an array of SelectItem-s
}
...

Armenvardanyan95

...
<p-dropDown [options]="users" dataKey="id" labelKey="fullName"></p-dropDown>
...

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <p-dropDown [options]="users">
      <ng-template let-user> //now we have a local 'user' variable with each user's data
        <img [src]="user.label" />
        <span> {{ user.fullName }} </span>
      </ng-template>
    </p-dropDown> 
  `

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <p-dropDown [options]="users">
      <ng-template let-user> //now we have a local 'user' variable with each user's data
        <img [src]="user.avatar" />
        <span> {{ user.label }} </span>
      </ng-template>
    </p-dropDown> 
  `