Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carousel: custom template for header not rendered #17790

Closed
2 of 4 tasks
Kue2 opened this issue Feb 28, 2025 · 1 comment
Closed
2 of 4 tasks

Carousel: custom template for header not rendered #17790

Kue2 opened this issue Feb 28, 2025 · 1 comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Kue2
Copy link
Contributor

Kue2 commented Feb 28, 2025

Describe the bug

Starting with PrimeNG 18, custom template passed through content projection into p-carousel for header is no longer rendered, unlike the custom footer which still renders correctly.
See https://stackblitz.com/edit/f5r18n2c?file=src%2Fapp%2Fcarousel-basic-demo.html

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/f5r18n2c?file=src%2Fapp%2Fcarousel-basic-demo.html

Environment

Prime 19
Angular 19

Angular version

19

PrimeNG version

v19

Node version

No response

Browser(s)

Chrome

Steps to reproduce the behavior

Add a custom header to p-carousel

<p-carousel
[value]="products"
[numVisible]="3"
[numScroll]="3"
[circular]="false"
[responsiveOptions]="responsiveOptions"

<!-- custom header -->
<ng-template pTemplate="header">
  <div style="background-color: yellow">Custom Header here!!</div>
</ng-template>

Expected behavior

An element with "Custom Header here!!" text is rendered before the carousel

@Kue2 Kue2 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 28, 2025
@Kue2
Copy link
Contributor Author

Kue2 commented Feb 28, 2025

Resolved by using #header in place of pTemplate="header" as identifier for ng-template

<!-- NOT WORKING custom header -->
<ng-template pTemplate="header">
  <div style="background-color: yellow">Custom Header here!!</div>
</ng-template>


<!-- WORKING custom header -->
<ng-template #header>
  <div style="background-color: yellow">Custom Header here!!</div>
</ng-template>

@Kue2 Kue2 closed this as completed Feb 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant