PrimeNG

https://primeng.dev/autocomplete
Admin
PrimeNG is a comprehensive suite of customizable, accessible, and feature-rich UI components for...
Tokens:961
Snippets:22
Trust Score:2.1
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install PrimeNG with npm

Source: https://primeng.dev

Install the PrimeNG package using npm. This is the first step to using PrimeNG components in an Angular project.

```bash
npm install primeng
```

--------------------------------

### Headless Dialog with custom template

Source: https://primeng.dev

Use the headless layer of the Dialog component to fully control the markup. The example shows a custom overlay with a backdrop, a form, and a close button.

```html
<p-dialog [(visible)]="visible">
  <ng-template #headless>
    <div class="fixed inset-0 bg-black/50"
      (click)="visible = false"></div>
    <div class="bg-white rounded-xl p-6 shadow-xl">
      <h2>Edit Profile</h2>
      <input pInputText [(ngModel)]="name" />
      <button (click)="visible = false">Close</button>
    </div>
  </ng-template>
</p-dialog>
```

--------------------------------

### Define custom theme preset with definePreset

Source: https://primeng.dev

Create a custom theme preset by extending the Aura preset with definePreset. Override semantic tokens for primary color, surfaces, and form field styling.

```typescript
import { definePreset } from '@primeuix/themes'
import Aura from '@primeuix/themes/aura'

const MyPreset = definePreset(Aura, {
  semantic: {
    primary: { 500: '#6366f1' },
    surface: { 0: '#ffffff', 950: '#09090b' },
    colorScheme: {
      dark: {
        surface: { 0: '#09090b', 950: '#fafafa' },
      }
    },
    formField: {
      borderRadius: '0.5rem',
      paddingX: '0.75rem',
      fontSize: '14px',
      shadow: '0 1px 2px rgba(0,0,0,0.05)',
    },
  }
})
```

--------------------------------

### Import multiple PrimeNG components

Source: https://primeng.dev

Import DataTable, Column, Dialog, Button, and other components from 'primeng' in a single import statement.

```typescript
import { DataTable, Column, Dialog, Button, ... } from'primeng'
```

--------------------------------

### Severity type comment

Source: https://primeng.dev

A comment showing the possible values for the severity prop: 'success', 'info', 'warn', or 'danger'.

```typescript
// severity: "success" | "info" | "warn" | "danger"
```

--------------------------------

### Import and use SliderModule with ngModel

Source: https://primeng.dev

Import SliderModule and FormsModule, then use the p-slider component with two-way binding via ngModel. The component is configured with a default value of 50.

```typescript
import { SliderModule } from 'primeng/slider'
import { FormsModule } from '@angular/forms'

@Component({
  template: `
    <p-slider [(ngModel)]="value" />
  `
})
export class VolumeControl {
  value = 50
}
```
Tokens:
Raw