Is PrimeNG's p-pickList changing source and target?

Question

I have an Angular app with PrimeNG. I am using the PickList component like this:

<p-pickList
  [source]="source"
  [target]="target"
>
  <ng-template
    let-item
    pTemplate="item">
    {{item | json}}
  </ng-template>
</p-pickList>

<h2>source</h2>
<ul>
  <li *ngFor="let s of source">{{s|json}}</li>
</ul>

<h2>target</h2>
<ul>
  <li *ngFor="let t of target">{{t|json}}</li>
</ul>

The component itself is straightforward:

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css'],
})
export class HelloComponent {
  source: string[];
  target: string[] = [];

  constructor() {
    this.source = [
      "foo",
      "bar",
      "baz",
    ];
  }
}

I do not use two-way-binding here, so how does PrimeNG updates source and target property?

On my main project source and target are @Input() properties and thus I don't want some sub component to fiddle with it. How is it possible that PrimeNG changes those values?

Answer 1

Odds are that within the component for primeNG there is an OnChange listener, and just generally speaking when something changes within one @Input it does trigger an onChange event.

As the Angular doc says (https://angular.io/api/core/OnChanges) anytime a data bound property changes it fires onChange. In this case here, target is a databound property.

Also, what do you mean by changing values? If you select foo it turns into foobar? Under the hood primeNG is not manipulating the data you passed it, it probably has its own internal store of how it displays the data for its picker list component.