Hey there! I'm currently exploring how to make the chips input non-editable. I am fetching data objects from one component and using the keys of those objects as labels for the chips.
Check out my HTML code below:
<div class="inputDiv" *ngFor="let k of key">
<div class="inlineclass">
<span class="title">{{k}}</span>
<p-chips [(ngModel)]="filterInput[k]" ></p-chips>
</div>
</div>
And here's the component where I'm retrieving my data:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'itc-upc-itc-component-filter',
templateUrl: './itc-component-filter.component.html',
styleUrls: ['./itc-component-filter.component.scss']
})
export class ItcComponentFilterComponent implements OnInit {
filterInput= { 'size': ['1T', '2T', '3T'], 'status': [ 'in progress','complete', 'pending']};
key= Object.keys(this.filterInput);
constructor() { }
ngOnInit() {
}
}
I've attempted using the disabled property on ng-prime's chips component:
<p-chips [(ngModel)]="filterInput[k]" disabled="true"></p-chips>
Is there a way to make this input uneditable while still allowing users to delete the chips?