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> 
  `

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <p-lightbox [images]="images"></p-lightbox>
  `
})
class SomeComponent {
  images = [
    {source: 'img.jpg', thumbnail: 'small-img.jpg'}, 
    {source: 'img2.jpg', thumbnail: 'small-img2.jpg'}

Armenvardanyan95

...
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
...

Armenvardanyan95

@Component({
  selector: 'some-component',
  template: `
    <p-dialog header="Title" [(visible)]="display">
      Content
    </p-dialog>
    
    <button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>
  `
})

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

@Component({
  selector: 'app-some-component-with-form',
  template: `
        <div [formGroup]="form">
          <div class="form-control">
            <label>First Name</label>
            <input type="text" formControlName="firstName" />
          </div>
          
          <div class="form-control">

Armenvardanyan95

@Component({
  selector: 'app-some-component-with-form',
  template: `
        <div [formGroup]="form">
          <div class="form-control">
            <label>First Name</label>
            <input type="text" formControlName="firstName" />
          </div>
          
          <div class="form-control">

Armenvardanyan95

@Component({
  selector: 'app-single-control-component',
  template: `
        <div class="form-control">
          <label>{{ label }}</label>
          <input type="text" [formControl]="control" />
        </div>
      `
})
export class SingleControlComponent{

Armenvardanyan95

<div>
  <app-single-control-component [control]="form.controls['firstName']" [label]="'First Name'">
  </app-single-control-component>

  <app-single-control-component [control]="form.controls['lastName']" [label]="'Last Name'">
  </app-single-control-component>

  <app-single-control-component [control]="form.controls['age']" [label]="'Age'">
  </app-single-control-component>
</div>

Armenvardanyan95

interface Movie {
  id: number;
  title: string;
}

@Component({
  selector: 'app-some-component-with-form',
  template: `...` // our form is here
})
export class SomeComponentWithForm {