PrimeNG Snippets

A Visual Studio Code extension that provides code snippets for PrimeNG components.

⚠️ Disclaimer ⚠️

This is NOT an official PrimeNG extension. This is a community-created extension to help developers work with PrimeNG components.

Official PrimeNG Resources

• Official PrimeNG Website
• PrimeNG Documentation
• PrimeNG GitHub Repository

Features

This extension provides snippets for common PrimeNG components, making it easier to implement them in your Angular applications.

HTML Snippets

Form Components

• p-inputtext - PrimeNG InputText component
• p-inputtextarea - PrimeNG InputTextarea component
• p-inputmask - PrimeNG InputMask component
• p-inputswitch - PrimeNG InputSwitch component
• p-keyfilter - PrimeNG KeyFilter component
• p-checkbox - PrimeNG Checkbox component
• p-radiobutton - PrimeNG RadioButton component
• p-dropdown - PrimeNG Dropdown component
• p-multiselect - PrimeNG MultiSelect component
• p-listbox - PrimeNG Listbox component
• p-calendar - PrimeNG Calendar component
• p-colorpicker - PrimeNG ColorPicker component
• p-chips - PrimeNG Chips component
• p-editor - PrimeNG Editor component
• p-fileupload - PrimeNG FileUpload component

Data Display Components

• p-table - PrimeNG DataTable component
• p-column - PrimeNG Column component
• p-accordion - PrimeNG Accordion component
• p-fieldset - PrimeNG Fieldset component
• p-carousel - PrimeNG Carousel component
• p-galleria - PrimeNG Galleria component
• p-lightbox - PrimeNG Lightbox component

Navigation Components

• p-menubar - PrimeNG Menubar component
• p-megamenu - PrimeNG MegaMenu component
• p-breadcrumb - PrimeNG Breadcrumb component
• p-tabview - PrimeNG TabView component
• p-steps - PrimeNG Steps component

Overlay Components

• p-dialog - PrimeNG Dialog component
• p-confirmdialog - PrimeNG ConfirmDialog component
• p-overlaypanel - PrimeNG OverlayPanel component
• p-sidebar - PrimeNG Sidebar component
• p-tooltip - PrimeNG Tooltip component

Button Components

• p-button - PrimeNG Button component
• p-splitbutton - PrimeNG SplitButton component
• p-speeddial - PrimeNG SpeedDial component

Other Components

• p-avatar - PrimeNG Avatar component
• p-blockui - PrimeNG BlockUI component
• p-message - PrimeNG Message component
• p-messages - PrimeNG Messages component
• p-gmap - PrimeNG GMap component
• p-autocomplete - PrimeNG AutoComplete component

TypeScript Snippets

Basic Structure

• p-import - Import PrimeNG module
• p-component - Create a new PrimeNG component
• p-service - Create a new PrimeNG service
• p-interface - Create a new PrimeNG interface
• p-enum - Create a new PrimeNG enum

Data Structures

• p-menuitem - Create PrimeNG MenuItem array
• p-treenode - Create PrimeNG TreeNode array
• p-message - Create PrimeNG Message
• p-confirmation - Create PrimeNG Confirmation

Component Templates

• p-table - Create PrimeNG Table component with pagination
• p-form - Create PrimeNG Form component with validation
• p-filter - Create PrimeNG Filter function

Usage

1. Type the snippet prefix (e.g., p-button for HTML or p-component for TypeScript) in your file
2. Press Tab or Enter to insert the snippet
3. Use Tab to navigate through the placeholders

Requirements

• Visual Studio Code 1.60.0 or higher
• Angular project with PrimeNG installed

Installation

1. Open VS Code
2. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac)
3. Type ext install primeng-snippets
4. Press Enter

Acknowledgments

• PrimeNG - For their excellent UI component library
• Angular - For the powerful web framework
• Visual Studio Code - For the amazing editor and extension platform
• All contributors who have helped improve this extension