Configuration

Global configuration options of the components.

Configuration is managed by the PrimeNGConfig instance imported from primeng/api and injected via dependency injection.


import { PrimeNGConfig } from 'primeng/api';

Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally by injecting PrimeNGConfig.


import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        this.primengConfig.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.

The ZIndex of all components is increased according to their groups in harmony with each other. When autoZIndex is false, each group increments its zIndex within itself.


import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        this.primengConfig.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.


constructor(private primengConfig: PrimeNGConfig) {
    this.primengConfig.csp.set({nonce: '...'});
}
        

Default filter modes to display on DataTable filter menus.


import { FilterMatchMode, PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        this.primengConfig.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 applied using the PrimeNGConfig instance so begin with injecting it. A common location is the application root to initialize the default language used by the components. English is the default language and setTranslation function is used to change the values by passing a Translation object.



import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {

    constructor(private primengConfig: PrimeNGConfig) {}

    ngOnInit() {
        this.primengConfig.setTranslation({
            accept: 'Accept',
            reject: 'Cancel',
            //translations
        });
    }
}

i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows dynamically changing the language in the application.



import { Component, OnInit } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

    constructor(private config: PrimeNGConfig, private translateService: TranslateService) {}

    ngOnInit() {
        this.translateService.setDefaultLang('en');
    }

    translate(lang: string) {
        this.translateService.use(lang);
        this.translateService.get('primeng').subscribe(res => this.config.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.

Configuration is managed by the Locale API imported from primeng/config.

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