how can I hide the left buttons in prime ng orderlist

Question

I am working on a prime ng example where I need to hide the the move up move down buttons I tried using the css approach but didn't worked

.p-orderlist-controls {
  display: none;
}

Here is the example I am trying out

https://stackblitz.com/edit/primeng-orderlist-demo-fpv6c5?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.scss

    <p-orderList
  [value]="products"
  [listStyle]="{ height: 'auto' }"
  header="List of Products"
  filterBy="name"
  filterPlaceholder="Filter by name"
  dragdrop="true"
>
**<div [ngClass]="showControls ? 'p-orderlist-controls':''"></div>**
  <ng-template let-product pTemplate="item">
    <div class="product-item">
      <div class="product-list-detail">
        <h5 class="mb-2">{{ product.name }}</h5>
        <i class="pi pi-tag product-category-icon"></i>
        <span class="product-category">{{ product.category }}</span>
      </div>
      <div class="product-list-action">
        <h6 class="mb-2">${{ product.price }}</h6>
        <span
          [class]="
            'product-badge status-' + product.inventoryStatus.toLowerCase()
          "
          >{{ product.inventoryStatus }}</span
        >
      </div>
    </div>
  </ng-template>
 
</p-orderList>

Answer 1

First feature

encapsulation: ViewEncapsulation.None

Add the same component to the directory Like this picture

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

In the next step, in the style section of the same component, you can give your styles to the up and down direction icons by calling these classes.

.p-element.p-ripple.p-button.p-button-icon-only[icon='pi pi-angle-up'] {
  display: none;
}

.p-element.p-ripple.p-button.p-button-icon-only[icon='pi pi-angle-down'] {
  display: none;
}

I hope it works