Configuration

    Application wide configuration for PrimeNG.

    The initial configuration is defined by the providePrimeNG provider during application startup.

    
    import { ApplicationConfig } from '@angular/core';
    import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
    import { providePrimeNG } from 'primeng/config';
    
    export const appConfig: ApplicationConfig = {
        providers: [
            provideAnimationsAsync(),
            providePrimeNG({ /* options */ })
        ]
    };
    
    

    Inject the PrimeNG to your application to update the initial configuration at runtime.

    
    import { Component, OnInit } from '@angular/core';
    import { PrimeNG } from 'primeng/config';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent implements OnInit {
    
        constructor(private primeng: PrimeNG) {}
    
        ngOnInit() {
            this.primeng.ripple.set(true);
        }
    }
    
    

    PrimeNG provides 4 predefined themes out of the box; Aura, Material, Lara and Nora. See the theming documentation for details.

    
    import { ApplicationConfig } from '@angular/core';
    import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
    import { providePrimeNG } from 'primeng/config';
    
    import Aura from '@primeng/themes/aura';
    
    export const appConfig: ApplicationConfig = {
        providers: [
            provideAnimationsAsync(),
            providePrimeNG({
                theme: {
                    preset: Aura,
                    options: {
                        prefix: 'p',
                        darkModeSelector: 'system',
                        cssLayer: false
                    }
                }
            })
        ]
    };
    
    

    Ripple is an optional animation for the supported components such as buttons. It is disabled by default.

    
    providePrimeNG({ 
        ripple: true
    })
    
    

    ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeNG configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeNG.

    
    import { PrimeNG } from 'primeng/config';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent implements OnInit {
    
        constructor(private primeng: PrimeNG) {}
    
        ngOnInit() {
            this.primeng.zIndex = {
                modal: 1100,    // dialog, sidebar
                overlay: 1000,  // dropdown, overlaypanel
                menu: 1000,     // overlay menus
                tooltip: 1100   // tooltip
            };
        }
    }
    
    

    The nonce value to use on dynamically generated style elements in core.

    
    providePrimeNG({ 
        csp: {
            nonce: '...'
        }
    })
    
    

    Default filter modes to display on DataTable filter menus.

    
    import { PrimeNG } from 'primeng/config';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent implements OnInit {
    
        constructor(private primeng: PrimeNG) {}
    
        ngOnInit() {
            primeng.filterMatchModeOptions = {
                text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
                numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
                date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
            };
        }
    }
    
    

    A translation is specified using the translation property during initialization.

    
    providePrimeNG({ 
        translation: {
            accept: 'Aceptar',
            reject: 'Rechazar',
            //translations
        }
    })
    
    

    The translations can be changed dynamically at runtime, here is an example with ngx-translate.

    
    
    import { Component, OnInit } from '@angular/core';
    import { PrimeNG } from 'primeng/config';
    import { TranslateService } from '@ngx-translate/core';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent implements OnInit {
    
        constructor(private config: PrimeNG, private translateService: TranslateService) {}
    
        ngOnInit() {
            this.translateService.setDefaultLang('en');
        }
    
        translate(lang: string) {
            this.translateService.use(lang);
            this.translateService.get('primeng').subscribe(res => this.primeng.setTranslation(res));
        }
    }
    
    

    Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests and share it with the rest of the community.

    Locale Options

    KeyValue
    startsWithStarts with
    containsContains
    notContainsNot contains
    endsWithEnds with
    equalsEquals
    notEqualsNot equals
    noFilterNo Filter
    ltLess than
    lteLess than or equal to
    gtGreater than
    gteGreater than or equal to
    dateIsDate is
    dateIsNotDate is not
    dateBeforeDate is before
    dateAfterDate is after
    clearClear
    applyApply
    matchAllMatch All
    matchAnyMatch Any
    addRuleAdd Rule
    removeRuleRemove Rule
    acceptYes
    rejectNo
    chooseChoose
    uploadUpload
    cancelCancel
    completedCompleted
    pendingPending
    fileSizeTypes['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    dayNames['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    dayNamesShort['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    dayNamesMin['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
    monthNames['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    monthNamesShort['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    chooseYearChoose Year
    chooseMonthChoose Month
    chooseDateChoose Date
    prevDecadePrevious Decade
    nextDecadeNext Decade
    prevYearPrevious Year
    nextYearNext Year
    prevMonthPrevious Month
    nextMonthNext Month
    prevHourPrevious Hour
    nextHourNext Hour
    prevMinutePrevious Minute
    nextMinuteNext Minute
    prevSecondPrevious Second
    nextSecondNext Second
    amam
    pmpm
    todayToday
    weekHeaderWk
    firstDayOfWeek0
    dateFormatmm/dd/yy
    weakWeak
    mediumMedium
    strongStrong
    passwordPromptEnter a password
    emptyFilterMessageNo results found'
    searchMessage{0} results are available
    selectionMessage{0} items selected
    emptySelectionMessageNo selected item
    emptySearchMessageNo results found
    emptyMessageNo available options
    aria.trueLabelTrue
    aria.falseLabelFalse
    aria.nullLabelNot Selected
    aria.star1 star
    aria.stars{star} stars
    aria.selectAllAll items selected
    aria.unselectAllAll items unselected
    aria.closeClose
    aria.previousPrevious
    aria.nextNext
    aria.navigationNavigation
    aria.scrollTopScroll Top
    aria.moveTopMove Top
    aria.moveUpMove Up
    aria.moveDownMove Down
    aria.moveBottomMove Bottom
    aria.moveToTargetMove to Target
    aria.moveToSourceMove to Source
    aria.moveAllToTargetMove All to Target
    aria.moveAllToSourceMove All to Source
    aria.pageLabel{page}
    aria.firstPageLabelFirst Page
    aria.lastPageLabelLast Page
    aria.nextPageLabelNext Page
    aria.prevPageLabelPrevious Page
    aria.rowsPerPageLabelRows per page
    aria.jumpToPageDropdownLabelJump to Page Dropdown
    aria.jumpToPageInputLabelJump to Page Input
    aria.selectRowRow Selected
    aria.unselectRowRow Unselected
    aria.expandRowRow Expanded
    aria.collapseRowRow Collapsed
    aria.showFilterMenuShow Filter Menu
    aria.hideFilterMenuHide Filter Menu
    aria.filterOperatorFilter Operator
    aria.filterConstraintFilter Constraint
    aria.editRowRow Edit
    aria.saveEditSave Edit
    aria.cancelEditCancel Edit
    aria.listViewList View
    aria.gridViewGrid View
    aria.slideSlide
    aria.slideNumber{slideNumber}
    aria.zoomImageZoom Image
    aria.zoomInZoom In
    aria.zoomOutZoom Out
    aria.rotateRightRotate Right
    aria.rotateLeftRotate Left