Component: Dialog position variable rejects string values as incorrect type

[dzmcclure-qcells]

Describe the bug

When using the p-dialog component, I tried to set the position dynamically as shown in the example documentation. However, the following error occurs:

error TS2322: Type 'string' is not assignable to type '"center" | "top" | "bottom" | "left" | "right" | "topleft" | "topright" | "bottomleft" | "bottomright"'.

Template code:
<p-dialog [(visible)]="isModalVisible" [modal]="true" [breakpoints]="{ '768px': '95vw' }" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false" [position]="position">

TypeScript code:
public position: string = 'center';

To fix the issue, I need to add the position string type union (or a subset) into my code:
value: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright'

However this should not be necessary and is also in contradiction to the documentation that a string is valid.

Environment

Angular 16 application

Reproducer

No response

Angular version

16.1.5

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.1

Browser(s)

No response

Steps to reproduce the behavior

The easiest way to reproduce is to replicate the code verbatim from the Dialog documentation here https://primeng.org/dialog#position

Alternatively:

1. Place a p-dialog tag on a component template
2. Add [position]="position" to the p-dialog
3. In the component, add position: string = 'center';
4. Run ng serve

The error can be circumvented by adding type unions to the variable but this should not be necessary:
position: 'center' | 'top' = 'center'

Expected behavior

String variables with a valid position value can be assigned to the [position] attribute on p-dialog.

[dzmcclure-qcells]

It looks like the bug was introduced here 2c5822d

[pevilot]

I am having the same problem.

[mehmetcetin01140]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,