Issue PrimeNg delivers really good Calendar component which works really fine, but is there a way to close it after choosing 2 dates? <p-calendar [(ngModel)]=”rangeDates” selectionMode=”range” [readonlyInput]=”true”></p-calendar> In documentation I noticed two interesting things as: – Event onSelect, unfortunately it
Continue readingTag: primeng
PrimeNg TabView dynamic component
Issue I am following this approach to dynamically create elements in an AngularApp based on a configuration JSON. Unfortunately that does not seem to work with all of the PrimeNG components. Especially not the TabView which I wanted to utilize
Continue readingPrimeNG Calendar error – JQuery is not defined
Issue I want to use PrimeNG calendar in my app. When I run the code, I get the error: ReferenceError: jQuery is not defined. Other PrimeNG directives work fine. If I remove <p-calendar> the error disappears. I have imported and
Continue readingHow to set calendar using PrimeNG calendar?
Issue I have a calendar control and I want to set some value to it, but I get the following error on the below line and value also does not get set. this.data.dateIn = this.selecteddata.dateIn; <p-calendar [(ngModel)]=”data.dateIn” [showIcon]=”true” name=”dateInCalendar” required
Continue readingAngular2 – PrimeNG calendar timeOnly unconfigured
Issue After PrimeNG evolves to version “^1.0.0-rc.3”, the following problem appears with the calendar : <p-calendar [(ngModel)]=”date7″ [timeOnly]=”true”></p-calendar> I’ve tried everything and I can not change. Can you help me? Solution Try to update your primeng version today 2.0 RC1
Continue readingCalendar on Angular 2 typescript using PrimeNG
Issue So I started to use the PrimeNG and I was following the website documentation where it says everything that one should do in order to make it work. I followed everything to the point on the website, but my
Continue readingUsing the PrimeNG Calendar to input data in a database
Issue I’m trying to replace the textbox with the PrimeNG calendar but keep the functionality of it storing the value that will be saved in the database. I thought that maybe something like combining input and p-calendar would work: <p-calendar
Continue readingDetect [(ngmodel) change to selected date with PrimeNG calendar
Issue I have an input element with an attached datepicker created using PrimeNG calendar. HTML Part <p-calendar showAnim=”slideDown” id=”calendar” [showIcon]=”true [(ngModel)]=”myDate” (blur)=”onBlurMethod($event)”> </p-calendar> Here I have used PrimeNG calendar tag. I have used one hidden text box so I can
Continue readingPrimeNG p-calendar – disableDate format
Issue I want to disable the dates from primeNG calendar. <p-calendar [(ngModel)]=”dateValue” dateFormat=”dd.mm.yy” [disabledDates]=”[here are the dates]”></p-calendar> For example I want to disable the dates from calendar except today and tomorrow. Solution Instead of using disabledDates, you should use minDate
Continue readingProgrammatically open PrimeNG calendar in modal popup
Issue How to make PrimeNG calendar at open state by default in modal popup ? Or how to trigger click event to open PrimeNG calendar which is in modal popup by typescript ? If I used in HTML itself, it
Continue readingPrimeNG calendar form group validation issue
Issue I’m trying to add validation to my form. discount field cannot be empty and value range needs to be within 0 to 100, time_from and time_to cannot be empty. I cannot fire validation proccess on time_from and time_to. I
Continue readingPrimeNG calendar is not working as expected in Angular5
Issue I am using PrimeNG calendar for date of birth field. I am using yearNavigator and yearRange. The user can select max value is 12 years back before the current year. <p-calendar formControlName=”dob” class=”” id=”dob-registration” dateFormat=”dd/mm/yy” placeholder=”DD/MM/YYYY” readonlyInput=”true” [monthNavigator]=”true” [yearNavigator]=”true”
Continue readingEvent onValueChange on a date. PrimeNG 5.2.4
Issue I am trying to use the event onValueChange, according to the PrimeNG documentation, but it does not work. View <p-calendar (onValueChange)=”changeFechaFinEstimada()” [(ngModel)]=”empleado.fechaFinEstimada” [locale]=”es” dateFormat=”dd-mm-yy” [showIcon]=”true” name=”fechaFinEstimada” id=”field_caducidad” [monthNavigator]=”true” [yearNavigator]=”true” yearRange=”2018:2030″></p-calendar> Controller changeFechaFinEstimada() { console.log(empleado); } Solution onValueChange event is
Continue readingprimeNG calendar select dates by default
Issue I am working with PrimeNg calendar first time and I am stuck with this thing , I need to use this calendar to show/select some initial dates by default which I am getting from Back-end as an array of
Continue readingPrimeNG p-Calendar & AutoComplete Values and Validation
Issue I am using primeNG p-Calendar Control and AutoComplete. Here is my Code (blunker) (click on edit then save”) I have two issues: I can’t get the newly selected Date for whatever reason..no matter what I do I always get
Continue readingHow to disabled past days selection in p-calender using primeng?
Issue I am using primeng p-calender I have the requirement that not to send past dates to the API, So I want to disable past dates selection If anyone knows please, comment Thanks in advance Solution Documentation ref: https://www.primefaces.org/primeng/#/calendar in
Continue readingManually load in node module that I have customised (Angular 4.x)
Issue I am using the primeng Calender functionality in my Angular 4.x app – however I have had to make lots of customisations to the plugin that I need to save within our repo however currently this file lives within
Continue readingAngular 6 – primeng <p-calendar> required condition
Issue I am using the the PrimeNg calendar component in angular 6, and I wish to implement a [required] directive with a condition. once I set the “required” with a condition it is always sets to true, no matter what
Continue readingHow to handle custom button click event for PrimeNG p-fullCalendar?
Issue I am using the p-fullCalendar control to display appointments. I want to add a custom button in the header to add a new appointment. I have done that by specifying it in the options as per full calendar docs:
Continue readingPrimeng Calendar monthNavigator property show first month as current month
Issue I am using PrimeNG 6.0.1 and I am facing the issue in Calendar Module. In my application, I want a month & year navigator. I have added the following code in HTML file. <p-calendar [monthNavigator]=”true” [yearNavigator]=”true” placeholder=”mm/dd/yyyy”></p-calendar> On UI
Continue readingChange style of time picker in primeng calendar
Issue I’m trying to remove the padding and set the font style to smaller in the time-picker used in primeng calendar for angular 7. <p-calendar [ngModel]=”xxx” timeOnly=”true” [(hourFormat)]=”hourFormat” [(dateFormat)]=”timeFormat” [showIcon]=”false” [style]=”{‘display’:’initial’}” [inputStyle]=”{‘border-width’:’1px 1px 1px 1px’, ‘width’:’100%’,’height’:’25px’}”></p-calendar> but it’s not applying.
Continue readingHow to set default date of prime-ng calendar when it is selected
Issue I’m using the prime-ng calendar and I can’t figure out how to set the default date when it is opened. The problem is that I know how to set a default value for the form field when the page
Continue readingis it possible to hide the Input field in the Primeng Calendar?
Issue Is it possible to hide the input field in the primeng calendar, and show only the icon? I don’t want to change the p-calendar element to inline, but just display the icon that will pop up the calendar. component.html
Continue readingPrimeNG Calendar open Z index error
Issue I am using primeNG calendar and whenever the calendar opens under the input box it is behind all the other html elements. But when it opens above the input box everything is ok. Solution I fixed it by using
Continue readingPrimeNG TimeOnly Calendar: Cannot Select default time intuitively
Issue I am using this PrimeNG timeonly calendar: <p-calendar id=”startHour” name=”startHour” [defaultDate]=”startHourDefault” [(ngModel)]=”startHourValue” [timeOnly]=”true” hourFormat=”12″ [inline]=”false” placeholder=”Select start hour” [disabled]=”IsDisabled”></p-calendar> I am setting start default hour to 9:00 AM var today = new Date(); this.startHourDefault= new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9,
Continue readingPrimeNG: Why clicking on a FullCalendar date the dateclick event is not emitted? How can I handle the click on a specific date on my calendar?
Issue I am pretty new in Angular and moreover in PrimeNG and I am finding the following difficulties trying to use FullCalendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar The problem is that I want to handle an event when the user click
Continue readingCannot get inputStyleClass to work at all
Issue I am using <p-calendar> in one of my components. I am trying to style it using a class in my sass-file, but inputStyleClass does not have any effect at all. In fact, I can’t even see the class in
Continue readingUnable to drag and drop external events into FullCalendar dayGridView
Issue I am going crazy with a very strange problem that I am facin using PrimeNG FullCalendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar That is based on the Angular FullCalendar component, this one: https://fullcalendar.io/ In particular I am trying to implement a
Continue readingHow to dinamically change Angular FullCalendar event color (of a specific event)?
Issue I am working on an Angular application using PrimeNG Full Calendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar That is based on the Angular FullCalendar component, this one: https://fullcalendar.io/ Here you can find my entire code: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/ I am finding some difficulties
Continue readingWhy am I obtaining this strange behavior trying to use different color for different event type dragged into a PrimeNG FullCalendar component?
Issue I am working on an Angular application using PrimeNG Full Calendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar That is based on the Angular FullCalendar component, this one: https://fullcalendar.io/ Here you can find my entire code: https://bitbucket.org/dgs_poste_team/soc_calendar/src/master/ I am finding some difficulties
Continue readingPrimeNG – set value in time-picker component
Issue I used calendar component from PrimeNG, I used timeOnly property to display only the time, I have a string like 12:10. I want to set this string into the calendar, is it necessary to convert it to date or
Continue readingWhy I can't set PrimeNG p-calenar component CSS style?
Issue I am working on an Angular project using PrimeNG and I am finding the following problem trying to give the correct CSS style to a p-calendar component into my page. Basically into my HTML code I have something like
Continue readingWhy PrimeNG p-calendar doens't show the value of the date?
Issue I am finding the following problem using PrimeNG Calendar component. Into the HTML view of my Angular component I have defined this PrimeNG component tag: <p-calendar [disabled]="disabled" [(ngModel)]="orderDetail.dettaglio_ordine.data_inserimento" dateFormat="yyyy-mm-dd"></p-calendar> This should view the date contained into a JSON object
Continue readingWhy PrimeNG p-calendar doens't show the value of the date?
Issue I am finding the following problem using PrimeNG Calendar component. Into the HTML view of my Angular component I have defined this PrimeNG component tag: <p-calendar [disabled]="disabled" [(ngModel)]="orderDetail.dettaglio_ordine.data_inserimento" dateFormat="yyyy-mm-dd"></p-calendar> This should view the date contained into a JSON object
Continue readingHow to reset inputFieldValue of PrimeNG calendar
Issue I am using PrimeNG p-calendar with selectionMode multiple. When user selects more than 4 dates, the text in the input is too long and becomes hidden. I want to set the input value so that if more than 4
Continue readingPrimeNG p-calendar: change the background-color of the dates
Issue Hi I’m trying to customize the p-calendar but can’t figure out how to change the color of the dates that are being displayed. Please Help. Thanks in advance. This is my template: <div class="p-field p-col-12 p-md-4"> <label for="time">Time</label> <p-calendar
Continue readingWhy @ViewChild() decorator is not working in this Angular component using PrimeNG FullCalendar?
Issue I am finding the following problem working on a simple Angular 9 project that uses PrimeNG FullCalendar component, this one: https://primefaces.org/primeng/showcase/#/fullcalendar This PrimeNG FullCalendar component is based on this other Angular original component https://fullcalendar.io/docs WHAT I HAVE TO DO:
Continue readingAngular: Set default dates for p-calendar
Issue I like to set default Dates for p-calendar PrimeNG component, how do I do that in Angular? Solution Use ngModel for that. <p-calendar [(ngModel)]=”value”></p-calendar> and set your specific date for value property. For instance, if you want to set
Continue readingAngular unit testing prime ng calendar
Issue Inside a unit test, when I have a regular element I can set its value, trigger a change event and verify the form value matches like so: const hostElement = fixture.nativeElement; const userIdSelect: HTMLInputElement = hostElement.querySelector(‘select[formcontrolname=”userId”]’); userIdSelect.value = ‘myUser’;
Continue readingDate filter with template not applying filtering (PrimeNG Table)
Issue I’m developing a SPA with PrimeNG’s table to display records, and each column has a filter for its data. One of them is a date record, which comes as ISO string and is converted to a Date object before
Continue readingOpen PrimeNG calendar programmatically
Issue I’m using the PrimeNG components w/Angular 4 but I’m running into an issue – that is how do I display the calendar when my button is clicked? See Plunker @Component({ selector: ‘my-app’, template: ` <div> <h2>Hello {{name}}</h2> <button pButton
Continue readingPrimeNG Calendar – Date displayed incorrectly
Issue I’m working with Angular and PrimeNG and I’m facing this problem: there is a form and a specific field is obtained with a calendar. When I pick the date, the format is incorrect, because the year is duplicated: i.e.
Continue readingPrimeNG Calendar – Override the default style
Issue Using angular, I am using p-calendar in a component and created a CSS class that is called from my component. No matter what I do I am unable to override the style. CSS .ui-calendar .ui-calendar-button { height: 34px; border-top-left-radius:
Continue readingIn PrimeNG, how do I set a border color for the p-calendar component when no data is entered?
Issue I’m using Angular 14 and PrimeNG 14. I have a p-calendar component that I would like to style with a red border color if the user has not entered a value. I have <p-calendar [showIcon]="true" [ngClass]="{‘border-red-500’: this.submitted && this.form.get(‘myDate’)?.hasError(‘required’)}"
Continue readingangular5 – child component called before parent ngOnInit finish
Issue first, make table setting data in ngOnInit() and set to settingA variable. this settingA variable binds to setting in html. and I want to make table in child component using settingA. but child component ngOnInit is called before parent
Continue readingAngular2 with primeng components Nativescript issues
Issue I could able to work on quickstart groceries app from nativescript page. In the login page I have replaced the Angular2 button to primeng button. While convert/transpile the code through TNS command it throws an error on primeng/button.js line
Continue readingChild doesn't render template passed by parent
Issue Well, this is my parent component where I am trying to pass the template nodeTemplate to the child ils-tree <div class="nodes-panel"> <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate"> </ils-tree> </div> <ng-template #nodeTemplate> <ng-template let-node pTemplate="default"> <p class="node-type">{{node.data.nodeType}}</p> <p class="node-name">{{node.data.name}}</p> </ng-template> <ng-template let-node
Continue readinghow do I remove the number labels on the bars of a primeng bar graph?
Issue I want to remove the numbers on the bar graphs. I’m not sure what to change on the Options array to make this happen. Here is my graph. https://ibb.co/G7nR3mz and here is my Options array this.Options = { legend:
Continue readingHow to add "formControlName" to angular reactive forms "formGroup" from child components?
Issue I have dynamic components in form and I want to connect fields with angular reactive forms. for example we have first-component.html <form [formGroup]="myform"> … <second-component></second-component> … <button type="submit"> </form> second-component.html <div ngFor …> … <third-component></third-component> … </div> third-component.html <div>
Continue reading<p-fileUpload> Change icon on PrimeNG on file upload
Issue Is it possible to change the icon on choose button on file upload ? In my case it is always “+”. <p-fileUpload class=”btn-primary” auto=”true” mode=”basic” name=”demo[]” chooseLabel=”Upload” [url]=”apiImageLocation” accept=”image/*” maxFileSize=”2000000″ (onUpload)=”onUploadImageSuccess($event)” (onError)=”onUploadImageError($event)”> </p-fileUpload> Solution You can override font awesome
Continue readingHow to style p-header of p-dialog i.e the whole header part?
Issue I am trying to style the p-header of primeng dialog box p-dialog component and am stuck at styling it. I want the whole header element to be red but instead just my text is getting red. Here is my
Continue readingtable/table is not exported from the package in angular 14
Issue I am using primeng, After updating the packages to latest version I am getting this Issue table/table is not exported from the package in angular 14.0.2. ./node_modules/library/fesm2020/library.mjs:133:0-29 – Error: Module not found: Error: Package path ./table/table is not exported
Continue readingClear multi-select with a button (angular primeng turbotable)
Issue Is it possible to remotely clear a multi-select (or multiple multi-selects) with a button? I’m using primeng multi-select with turbo table I’ve seen this question a few times, but not with a selected answer. Below is my multi-select: <span
Continue readingHow to scroll to last row on a PrimeNG TurboTable component
Issue I’m using a PrimeNG TurboTable component on an Angular 7 application and there’s a button to add new rows to it. The problem is that, when a new row is added, the user has to scroll down to the
Continue readingHow to get index value in ng-template for primeng dropdown
Issue I am trying to get index value in ng-template for primeng dropdown but its giving me empty value. Here is sample code <p-dropdown [options]="cards" [(ngModel)]="selectedCard"> <ng-template let-card let-i="index" pTemplate="item"> <span>{{i}}</span> </ng-template> </p-dropdown> Solution if you check primeng source code
Continue readingHow do I get primeNg to position a label above the input text field?
Issue I’m using Angular 13 and PrimeNG 13.4.1. I would like to have a label be directly above a text field, so I built <div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;"> <div class="p-field"> <span class="p-float-label"> <input type="text" formControlName="name" pInputText> <label for="formLogoId">My
Continue readingHow to wrap or justicy the contents of PrimeNg's p-timeline
Issue I don’t know whether wrap is the correct term or justify. I’m using PrimeNg’s p-timeline. I’m doing exactly as mentioned in the official documentation: <p-timeline [value]="events" layout="horizontal"> <ng-template pTemplate="content" let-event> {{event.status}} </ng-template> </p-timeline> ———————————- events: any[]; ngOnInit() { this.events
Continue readingHide Primeng datatable paginator when no records
Issue I have added Datatable from primeng-v2.0.4. <p-dataTable [value]=”tableData” [rows]=”rows” [paginator]=”true” [resizableColumns]=”true” [tableStyleClass]=”table-wrap” [rowsPerPageOptions]=”[5,10,20]”> : : </p-dataTable> I saw option [paginatorAlwaysVisible]=”false” in one of the forums, but that attribute does not seem to be available for this version of primeng.
Continue readingExpanding the prime-ng's p-table row on click of the row
Issue The link here https://www.primefaces.org/primeng/#/table/rowexpansion shows an example of p-table where the rows can be expanded by clicking on the first column which uses the directive pRowToggler. I am trying to achieve this toggling on the click of the row
Continue readingPrimeng make scrollable datatable height responsive
Issue PrimeNG DataTable provides a [scrollable] property to define vertical and/or horizontal scrolling. This has to be used with a combination of a set scrollHeight and/or scrollWidth. How can I have a table that will adjust to whatever the height/width
Continue readingHow can I display upper case value in capital case In Angular toolTip?
Issue My HTML:- <i [class]="item.icon" [pTooltip]="item.item" tooltipPosition="bottom" ></i> The value inside item.item is ‘ATTACHMENT’ I can not modify that from ts file Can I do something within HTML to change the case to capital:- Attachment for showing the tooltip? Solution
Continue readingicon not apear like primeng example
Issue why the icon that I implement from primeng not seen like primeng example and not like I need? code: <i class="pi pi-info-circle" style="font-size: 2rem"></i> <span class=" pi pi-info-circle"></span> looks like: mycode primeng example primeng what I need mydesire Thank
Continue readingHow to collapse/expand multiple panels in PrimeNG?
Issue I have multiple panels and 2 buttons. One button will expand them all and the other one will collapse them all. I’m not able to expand or collapse them. Does anyone know how to make this happen? Here’s my
Continue readingprimeNG multiselect on change not triggered on chips removal
Issue below is a sample of my code. A primeng multiselect is the source of a primeng dropdown: HTML: <p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip" (onChange)="onElementChange($event)"></p-multiSelect <p-dropdown [options]="availableElements" [(ngModel)]="selectedElement" optionLabel="elementID" placeholder="Select an Element"></p-dropdown> ts: onElementChange(event) { this.availableElements = []; this.availableElements =
Continue readingHow to pass argument in PrimeNG's SplitButton?
Issue This is my MenuItem array: this.ButtonItems = [ {label: ‘Edit’, icon: ‘fa fa-pencil-alt’, command: (x) => { this.onEditDocument(x); }}, {label: ‘Duplicate’, icon: ‘pi pi-times’, command: (x) => { this.onDuplicate(x); }} ]; Both functions need a parameter of type string
Continue readingCheck element of columnoptions of p-multiSelect PrimeNG add the concerned column in the end of array
Issue Is there any solution to make the check/uncheck element of PrimeNG p-multiselect keep the binded array’s columns in order ? (actually when we uncheck an element it disappears from the array’s columns but when we re-check, the column is
Continue readingUnable to display PrimeNg toasts when switching pages
Issue I’m trying to use the PrimeNg Toasts to confirm the deletion of one user. Basically, here is my code: deleteUser() { this.confirmationService.confirm({ message: this.translateService.instant(‘common.messages.deletion-confirm’), header: this.translateService.instant(‘common.messages.deletion-title’), icon: ‘fa-light fa-triangle-exclamation’, acceptLabel: this.translateService.instant(‘common.messages.ok’), rejectLabel: this.translateService.instant(‘common.messages.cancel’), rejectButtonStyleClass: ‘p-button-secondary p-button-text’, accept: async ()
Continue readingAngular dynamic nested key ngModel
Issue How to use dynamic key in ngModel? I am using the primeNg library and i’m trying to bind a dynamic key to the ngModel this is the html template <p-table [columns]="cols" [value]="data"> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr> <td *ngFor="let
Continue readingPrimeNG Steps inside Dynamic Dialog
Issue I create a step component like on primeNG page and I’d like to put him inside a dynamic dialog but after applying it the "Step 1" and "Step 2" are not rendered. Looking at the code I see that
Continue readingAn unhandled exception occurred: Script file ../node_modules/chart.js does not exist
Issue I’m trying to use PrimeNG on my Angular project,Iv created a new project and tried to start, but it give me this error, I did the following steps: npm install primeng –save npm install @angular/animations –save npm install Chart.js
Continue readingPrimeNG – Steps: how to get the current step highlighted
Issue I’m trying to use the steps to display several steps in a wizard. My wizard steps works, but I can’t manage to have the current steps highlighted properly in the steps list. I was able to replicate in a
Continue readingApply CSS Rules conditionally to elements in *ngFor loop
Issue I have a list dynamically filled with objects. I want to achieve to add a background color to the div containing the checked checkbox. Moreover, i want to show the buttons when the checkbox is checked. <div *ngFor="let item
Continue readingCannot enter decimal point in primeNG p-columnFilter
Issue I am using p-table and p-columnFilter components in a modal in my angular project. I am using the following libraries: "primeflex": "^2.0.0", "primeicons": "^4.1.0", "primeng": "^11.2.0", "@angular/cli": "^11.2.5", here my HTML: <th> <div class="flex justify-content-center align-items-center"> Pressure ({{pressureUnits}}) <p-columnFilter
Continue readingHow to programmatically select item in primeng p-menu?
Issue Any idea how to programmatically select an item in a primeng p-menu? Code is straightforward: <p-menu #menu [popup]=”true” [model]=”configMenuItems” appendTo=”body” [style]=”{‘text-align’: ‘left’}”></p-menu> <button type=”button” class=”btn btn-link” pTooltip=”Select Site” tooltipPosition=”left” onclick=”this.blur();” (click)=”menu.toggle($event)”> {{selectedSite.DisplayName}} <span class=”caret”></span> </button> Solution Judging by the
Continue readingPrimeNG MultiSelect: How to select whole group
Issue I’m using a primeNG grouped multi select and I wonder if it’s possible to select all items of a group by clicking on the group itself? Here is my code so far: <p-multiSelect [options]="items" [group]="true" [(ngModel)]="selectedItems" optionLabel="name" optionValue="id" optionGroupLabel="label"
Continue readinghow set other templates for elements from dropdown angular prime ng
Issue I have a dropdown from PrimeNg with few elements. .ts this.cities = [ {name: ‘New York’, code: ‘NY’}, {name: ‘Rome’, code: ‘RM’}, {name: ‘London’, code: ‘LDN’}, {name: ‘Istanbul’, code: ‘IST’}, {name: ‘Paris’, code: ‘PRS’} ]; .html <p-dropdown [options]="cities" [(ngModel)]="selectedCity1"
Continue readingCannot render properly `<p-fieldset>` in angular with primeng
Issue I’m completely new in angular and primeng. I’m doing a simple app (well, is a static web with different components) in which I use a router to render different components based on url. One of this components use the
Continue readingDisabling PrimeNG checkbox
Issue I’m trying to disable a PrimeNG checkbox in certain cases using the disabled property and setting it to true. However, each time the checkbox is disabled and I click it, it refreshes the page and takes me to the
Continue readingIdentify the p-checkbox where an event occurs in Angular
Issue I would like to know if there is a way to identify my checkbox, along with the event that occurs when it is selected, that is, if I can put a type of ID and pass it to my
Continue readingPrimeNG p-checkbox – Add asterisk mandatory sign after label
Issue Below is my p-checkbox code: <div class="col-sm-8"> <p-checkbox [(ngModel)]="allowParticipation" binary="true" label="I need to add red asterisk sign after this Label" </p-checkbox> </div> How to add an asterisk sign after the label so that it should like below (checkbox) I
Continue readingLong list of PrimeNG Checkboxes destroys the whole page layout
Issue Open this StackBlitz Scroll all the way down Click on one of the last few checkboxes (This occurs for me on Google Chrome Version 92.0.4515.131 (Official Build) (64-bit) but e.g. NOT on firefox – I did not check other
Continue readingPrimeNG: how to 'pack' or 'build' the project after making changes?
Issue I use primeng in my angular application. I wanted to add some functionality to one of the components so I followed the instructions (https://github.com/primefaces/primeng/wiki/Building-From-Source) and got all of my changes to work. Now I want to package it up
Continue readingngx-charts lines disappear when chart drawn in PrimeNG dialog that is closed and reopened
Issue I am currently using PrimeNG for my typescript angular application. I am using the dialog component provided by PrimeNG to have a pop up that draws charts via ngx-charts (specifically ngx-charts-line-chart). When I first open the dialog the chart
Continue readingprimeng issues with rc5
Issue After upgrading to rc5, and reinstalling primeng with the new release, I receive the following error: zone.js?1472019041780:484 Unhandled Promise rejection: Template parse errors: Can’t bind to ‘icon’ since it isn’t a known property of ‘button’. (“ver’:hovered,’ui-state-focus’:focused,’ui-state-disabled’:disabled}” >][icon]=”icon” pButton *ngIf=”showIcon”
Continue readingAngular 2: How to conditionally Disable or Enable the Add and Remove Button in PrimeNG PickList
Issue I am new to Angular 2 and i am implementing dual list box using pickList from PrimeNG (https://www.primefaces.org/primeng/#/picklist). I am listing table data of 3 columns inside PrimeNG pickList with ADD and REMOVE button. Could anyone please let me
Continue readingprimeNG TabView won't show content onInit
Issue Good morning, I have a problem with the primeNG component TabView. I am trying to build a custom lib with primeNG as base. Therefore I have implemented a tabs component and a tab-item component In my first try every
Continue readingAngular 6 Error trying to diff '[object Object]'. Only arrays and iterables are allowed
Issue I think my Problem is that the API delivers an Object instead of an array. So i need to Modify the Object to be an Array ? How could this be done ? Object.assign ? Or Pipe ? Does
Continue readingAngular PrimeNG tag component value cannot bind object
Issue When I navigate to order page got values of all fields except in <p-tag field…Blank field is showing and getting following errors Cannot read properties of undefined (reading ‘label’) I am using angular version 13 All codes are given
Continue readingAngular PrimeNG Chart Module: Customize hover text
Issue In the PrimeNG chart, when I hover over a data point I can see the black box with some information about the point. How can I customize this box? I want to add my own HTML for that hover
Continue readingOpen multiselect with another button (primeng, angular)
Issue Is there a way to open a primeng multiselect using another button? I’ve tried triggering by clicking on the nativeElement, but that has not worked. Below is my component: <div> <button class=”btn btn-primary” #filterButton (click)=”openMultiselect()”>Trigger remotely</button> </div> <div class=”ui-g”>
Continue readingAngular primeng drop down with float label render badly on first time
Issue I have an angular application in where im using floating labels when i first load the component (a p-dialog) the floating labels are “falling down” to the select as shown in the image here is the code im using
Continue readingHow to change primeNG datatable p-column filter date format?
Issue How and is it possible to change date format when filtering by date? <p-columnFilter type="date" [field]="col.field" display="menu"> Default format is mm/dd/yyyy but I want to achieve dd/mm/yyyy Solution So far I haven’t posted an answer so here is the
Continue readingHow can I use *ngIf on primeng menubar? I am trying to use it when displaying login and logout based on authentication
Issue We have only one p-menubar tag while using primeng menubar. Everything is in ts file. How can I use *ngIf or *ngswitch on a certain item. <p-menubar [model]="items"> onAuthStateChanged(auth, (User)=>{ this.show= !this.show this.user=JSON.parse(JSON.stringify(User)).displayName }) this.items = [ { label:
Continue readingPrimeng Editable Rows – NullInjectorError: No provider for EditableRow
Issue I have a working primeng table that I wanted to make the rows editable for and followed their documentation to do so. But it throws me the following error when it tries to load NullInjectorError: No provider for EditableRow
Continue readingshow count instead of labels when exceeding the wide of a p-treeSelect
Issue I’m writing an angular14 project using PrimeNG 13.4.1 I use the p-treeSelect component with checkboxes in order for the user to be able to select root nodes and to select multiple items. what I’m trying to achieve is that
Continue readingMultiple primeng table in ngFor with selectall checkbox
Issue I’m trying to create dynamic multiple tables using primeng table and ngFor like below <div *ngFor="…"> <p-table> … //header <p-tableHeaderCheckbox></p-tableHeaderCheckbox> … //body <p-tableCheckbox></p-tableCheckbox> </p-table> </div> Consider we have two tables, generated dynamically; using the data we provided in [value],
Continue readingpopup with angular 7
Issue I have the follwing code which work great, it show some simple data with table when press a button, But I want all the data of table to show with popup window and not part of the screen, how
Continue readingPrimeng table virtual scroll header jumping while scrolling up
Issue I have a large set of data that needs virtual scrolling and I use PrimeNg v13.4.0 with angular/cdk v13.3.7. I have exactly the same issue with PrimeNg demo. When scrolling down, the sticky header works well, but when scrolling
Continue readingPrimeng data table limit the max 4 row selectable
Issue I’m using angular 11 with primeng library. Objective is to select max 4 records and show comparison on dialogue box. Using <p-tableCheckboc for row selection. But chalenge is there is no arrangment for limiting the max no of row
Continue readingHow to bind 'disabled' property of PrimeNG MenuItem?
Issue I’m developing an application using angular / primeng and came across an issue. I’m using a primeng TabMenu component and would like some tabs to be disabled depending on whether a user is logged in or not, but I
Continue reading