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

You could replicate the values of source and target in your HelloComponent, then use these copies for the underlying PrimeNG PickList widget. This allows you to pass updates to the HelloComponent that will be communicated down to the PrimeNG widget, but changes to those arrays within the PrimeNG widget won't impact the original input array.

I believe in your original code, the original array that's being passed as an input to HelloComponent, then passed into the PrimeNG widget, is being passed by a "copy of a reference."

private _sourceOptions: string[];
@Input set sourceOptions(options: string[]) {
    // Ensure we're not passing a reference to the array down because it may still
    // be changed. Create a new array with the same items. This can also help with
    // firing change detection in the PrimeNG widget.
    this._sourceOptions = options.slice(0);
}

get sourceOptions(): string[] {
    return this._sourceOptions;
}

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

Answer 2

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.