<commit_before><div class="content-section introduction">
    <div>
        <span class="feature-title">Dynamic Dialog</span>
        <span>Dialogs can be created dynamically with any component as the content using a DialogService.</span>
    </div>
</div>

<div [ngClass]="{'news-active': isNewsActive(), 'content-section implementation': true}">
    <p-toast></p-toast>

    <button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"></button>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;DynamicDialogModule&#125; from 'primeng/dynamicdialog';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component as its content. Since the dynamically
                loaded content is not defined at build time, a configuration is necessary using the entryComponents of your parent module. Example below, displays a list of cars
                using the CarsListDemo component so it needs to be configured at entryComponents along with the import of DynamicDialogModule. The configuration of the demo page is as follows;
            </p>

<pre>
<code class="language-typescript" pCode ngNonBindable>
@NgModule(&#123;
    imports: [
        CommonModule,
        DynamicDialogModule,
        ToastModule,
        TableModule,
        ButtonModule
    ],
    declarations: [
        DynamicDialogDemo,
        CarsListDemo
    ],
    entryComponents: [
        CarsListDemo
    ]
&#125;)
export class DynamicDialogDemoModule &#123;
</code>
</pre>

            <p>Next step, is injecting an instance of a DialogService to the component that will open the dialog.</p>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';
import &#123;DialogService&#125; from 'primeng/primeng';
import &#123;CarsListDemo&#125; from './carslistdemo';
import &#123;Car&#125; from '../../components/domain/car';

@Component(&#123;
    templateUrl: './dynamicdialogdemo.html',
    providers: [DialogService]
&#125;)
export class DynamicDialogDemo &#123;

    constructor(public dialogService: DialogService) &#123;&#125;

&#125;
</code>
</pre>

            <p>Displaying a dialog is done with the open method where the first parameter is the type of component to load and the second parameter is the configuration of the Dialog such as header, width and more.</p>
                
<pre>
<code class="language-typescript" pCode ngNonBindable>
&lt;button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
show() &#123;
    const ref = this.dialogService.open(CarsListDemo, &#123;
        header: 'Choose a Car',
        width: '70%'
    &#125;);
&#125;
</code>
</pre>

            <p>In case you need to pass data to the component that is dynamically loaded, use the data property that can be access using the DynamicDialogConfig class. In additon, the loaded component can also control the Dialog using the DynamicDialogRef API.
                Both the DynamicDialogConfig and DynamicDialogRef are injectable using the constructor.
            </p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
show() &#123;
    const ref = this.dialogService.open(CarsListDemo, &#123;
        data: &#123;
            id: '51gF3'
        &#125;,
        header: 'Choose a Car',
        width: '70%'
    &#125;);
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';
import &#123;Car&#125; from '../../components/domain/car';
import &#123;CarService&#125; from '../../service/carservice';
import &#123;DynamicDialogRef&#125; from 'primeng/primeng';
import &#123;DynamicDialogConfig&#125; from 'primeng/primeng';

@Component(&#123;
    templateUrl: './carslistdemo.html',
&#125;)
export class CarsListDemo &#123;

    cars: Car[];
            
    constructor(private carService: CarService, public ref: DynamicDialogRef, public config: DynamicDialogConfig) &#123; &#125;

    ngOnInit() &#123;
        //id: this.config.id
        this.carService.getCarsSmall(id).then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>

<p>Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where the parameter passed will be available at the onClose
event at the caller. Here is an example on how to close the dialog from the CarsListDemo by passing a selected car.
</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';
import &#123;Car&#125; from '../../components/domain/car';
import &#123;CarService&#125; from '../../service/carservice';
import &#123;DynamicDialogRef&#125; from 'primeng/primeng';
import &#123;DynamicDialogConfig&#125; from 'primeng/primeng';

@Component(&#123;<commit_msg>Fixed docs with correct imports<commit_after><div class="content-section introduction">
    <div>
        <span class="feature-title">Dynamic Dialog</span>
        <span>Dialogs can be created dynamically with any component as the content using a DialogService.</span>
    </div>
</div>

<div [ngClass]="{'news-active': isNewsActive(), 'content-section implementation': true}">
    <p-toast></p-toast>

    <button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"></button>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;DynamicDialogModule&#125; from 'primeng/dynamicdialog';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component as its content. Since the dynamically
                loaded content is not defined at build time, a configuration is necessary using the entryComponents of your parent module. Example below, displays a list of cars
                using the CarsListDemo component so it needs to be configured at entryComponents along with the import of DynamicDialogModule. The configuration of the demo page is as follows;
            </p>

<pre>
<code class="language-typescript" pCode ngNonBindable>
@NgModule(&#123;
    imports: [
        CommonModule,
        DynamicDialogModule,
        ToastModule,
        TableModule,
        ButtonModule
    ],
    declarations: [
        DynamicDialogDemo,
        CarsListDemo
    ],
    entryComponents: [
        CarsListDemo
    ]
&#125;)
export class DynamicDialogDemoModule &#123;
</code>
</pre>

            <p>Next step, is injecting an instance of a DialogService to the component that will open the dialog.</p>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';
import &#123;DialogService&#125; from 'primeng/dynamicdialog';
import &#123;CarsListDemo&#125; from './carslistdemo';
import &#123;Car&#125; from '../../components/domain/car';

@Component(&#123;
    templateUrl: './dynamicdialogdemo.html',
    providers: [DialogService]
&#125;)
export class DynamicDialogDemo &#123;

    constructor(public dialogService: DialogService) &#123;&#125;

&#125;
</code>
</pre>

            <p>Displaying a dialog is done with the open method where the first parameter is the type of component to load and the second parameter is the configuration of the Dialog such as header, width and more.</p>
                
<pre>
<code class="language-typescript" pCode ngNonBindable>
&lt;button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"&gt;&lt;/button&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
show() &#123;
    const ref = this.dialogService.open(CarsListDemo, &#123;
        header: 'Choose a Car',
        width: '70%'
    &#125;);
&#125;
</code>
</pre>

            <p>In case you need to pass data to the component that is dynamically loaded, use the data property that can be access using the DynamicDialogConfig class. In additon, the loaded component can also control the Dialog using the DynamicDialogRef API.
                Both the DynamicDialogConfig and DynamicDialogRef are injectable using the constructor.
            </p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
show() &#123;
    const ref = this.dialogService.open(CarsListDemo, &#123;
        data: &#123;
            id: '51gF3'
        &#125;,
        header: 'Choose a Car',
        width: '70%'
    &#125;);
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';
import &#123;Car&#125; from '../../components/domain/car';
import &#123;CarService&#125; from '../../service/carservice';
import &#123;DynamicDialogRef&#125; from 'primeng/dynamicdialog';
import &#123;DynamicDialogConfig&#125; from 'primeng/dynamicdialog';

@Component(&#123;
    templateUrl: './carslistdemo.html',
&#125;)
export class CarsListDemo &#123;

    cars: Car[];
            
    constructor(private carService: CarService, public ref: DynamicDialogRef, public config: DynamicDialogConfig) &#123; &#125;

    ngOnInit() &#123;
        //id: this.config.id
        this.carService.getCarsSmall(id).then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>

<p>Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where the parameter passed will be available at the onClose
event at the caller. Here is an example on how to close the dialog from the CarsListDemo by passing a selected car.
</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Component&#125; from '@angular/core';
import &#123;Car&#125; from '../../components/domain/car';
import &#123;CarService&#125; from '../../service/carservice';
import &#123;DynamicDialogRef&#125; from 'primeng/dynamicdialog';
import &#123;DynamicDialogConfig&#125; from 'primeng/dynamicdialog';

@Component(&#123;
{'fraction_non_alphanumeric': 0.13015933960453063, 'fraction_numerical': 0.0355154540218852, 'mean_word_length': 3.781551170261588, 'pattern_counts': {'":': 0, '<': 125, '<?xml version=': 0, '>': 127, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4332574', 'n_tokens_mistral': 3294, 'n_tokens_neox': 2973, 'n_words': 1003}