u/nzb329

GitHub: https://github.com/acrodata/rnd-dialog

Demo: https://acrodata.github.io/rnd-dialog/

I love the utility of ng-select, but I grew frustrated with its arbitrary naming, bloated CSS, and the constant struggle to override styles. So, I built a version that prioritizes engineering craftsmanship and modern styling.

Include styles

@use '@ng-matero/ng-select';

Usage

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-matero/ng-select';

@Component({
  selector: 'your-app',
  template: `
    <!-- Using items input -->
    <ng-select [items]="cars" bindLabel="name" bindValue="id" [(ngModel)]="selectedCar" />

    <!-- Using ng-option and for loop -->
    <ng-select [(ngModel)]="selectedCar">
       (car of cars; track car.id) {
        <ng-option [value]="car.id">{{ car.name }}</ng-option>
      }
    </ng-select>
  `,
  imports: [FormsModule, NgSelectModule],
})
export class YourAppComponent {
  cars = [
    { id: 1, name: 'Volvo' },
    { id: 2, name: 'Saab', disabled: true },
    { id: 3, name: 'Opel' },
    { id: 4, name: 'Audi' },
  ];
  selectedCar = 3;
}

📦 GitHub: https://github.com/ng-matero/combobox

🚀 Demo: https://ng-matero.github.io/combobox/