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

Issue

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?

Solution

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>

Answered By – Zulfe

Answer Checked By – Cary Denson (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published