Angular dual-listbox make specific entry readonly

Having looked at the source code., it's just not supported.

The documentation does however describe the ability to extend the component. And that could allow you to just add a small validation.

And following up on that advice, you could quickly create something as follows.

import { Component } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox';
 
@Component({
    selector: 'custom-dual-list',
    templateUrl: './custom-dual-list.component.html',
    styleUrls: [ './custom-dual-list.component.scss' ]
})
export class CustomDualListComponent extends DualListComponent {

  moveItem(source: BasicList, target: BasicList, item: any = null, trueup = true) {

    if (this.canMoveItem(item)) super.moveItem(source, target, item, trueup);

  }

  canMoveItem(item: any): boolean {
    // add some logic here.
    return true; // or false
  }
}

However, their documentation assumes that you add your own template and css files. You could try to reference theirs but that's usually not that easy. In general extending components is never easy in angular. Composition is easier than inheritance, but it won't give you enough control.

In all honesty, since this is just a small component, you may be better of just copying the entire source code. (It's just 3 small files) You will be done in less than an hour, surely.

Of course, you will lose future updates of the component. So, the political correct way to do it, is probably to fork their repository, make the changes, and send a pull request. And finally after their approval, wait for their next release, and install the updated package.

Because that requires a lot of time and effort, you may be better of just copying the whole thing.