Dialogs

    
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import {TuiAlertService, TuiButton} from '@taiga-ui/core';
import {TuiAvatar} from '@taiga-ui/kit';
import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
import {switchMap} from 'rxjs';
 
import {PromptService} from './prompt/prompt.service';
 
@Component({
    standalone: true,
    exportAs: "Example1",
    selector: 'tui-dialogs-example-1',
    imports: [TuiAvatar, TuiButton],
    templateUrl: './index.html',
    styleUrls: ['./index.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TuiDialogsExample1 {
    private readonly alerts = inject(TuiAlertService);
    private readonly promptService = inject(PromptService);
 
    protected onClick(
        choose: PolymorpheusContent,
        poorly: PolymorpheusContent,
        wisely: PolymorpheusContent,
    ): void {
        this.promptService
            .open(choose, {
                heading: 'Taiga UI is the best',
                buttons: ['Absolutely!', 'No way!'],
            })
            .pipe(
                switchMap((response) =>
                    response
                        ? this.alerts.open(wisely, {
                              appearance: 'positive',
                          })
                        : this.alerts.open(poorly, {
                              appearance: 'negative',
                          }),
                ),
            )
            .subscribe();
    }
}
    

        
            Copy
        
        
    

    
<button
    tuiButton
    type="button"
    (click)="onClick(choose, poorly, wisely)"
>
    Show prompt
</button>
<ng-template #choose>
    <div class="wrapper">
        <tui-avatar
            size="l"
            src="assets/images/choose.png"
            class="tui-space_right-2"
        />
        «Choose wisely»
    </div>
</ng-template>
<ng-template #poorly>
    <div class="wrapper">
        <tui-avatar
            src="assets/images/poorly.png"
            class="tui-space_right-2"
        />
        «You chose poorly»
    </div>
</ng-template>
<ng-template #wisely>
    <div class="wrapper">
        «You have chosen wisely»
        <tui-avatar
            src="assets/images/wisely.png"
            class="tui-space_left-1"
        />
    </div>
</ng-template>
    

        
            Copy
        
        
    

    
.wrapper {
    display: flex;
    align-items: center;
}
    

        
            Copy
        
        
    

    
import {Injectable} from '@angular/core';
import {TuiPopoverService} from '@taiga-ui/cdk';
import {TUI_DIALOGS} from '@taiga-ui/core';
 
import {Prompt} from './prompt.component';
import type {PromptOptions} from './prompt-options';
 
@Injectable({
    providedIn: 'root',
    useFactory: () =>
        new PromptService(TUI_DIALOGS, Prompt, {
            heading: 'Are you sure?',
            buttons: ['Yes', 'No'],
        }),
})
export class PromptService extends TuiPopoverService<PromptOptions, boolean> {}
    

        
            Copy
        
        
    

    
export interface PromptOptions {
    readonly buttons: readonly [string, string];
    readonly heading: string;
}
    

        
            Copy
        
        
    

    
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import type {TuiPopover} from '@taiga-ui/cdk';
import {TuiButton, TuiDialogCloseService} from '@taiga-ui/core';
import {
    injectContext,
    PolymorpheusOutlet,
    PolymorpheusTemplate,
} from '@taiga-ui/polymorpheus';
 
import type {PromptOptions} from './prompt-options';
 
@Component({
    standalone: true,
    selector: 'prompt',
    imports: [PolymorpheusOutlet, PolymorpheusTemplate, TuiButton],
    templateUrl: './prompt.template.html',
    styleUrls: ['./prompt.style.less'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [TuiDialogCloseService],
})
export class Prompt {
    protected readonly context = injectContext<TuiPopover<PromptOptions, boolean>>();
 
    // Here you get options + content + id + observer
    constructor() {
        // Close on click outside/Escape button
        inject(TuiDialogCloseService)
            .pipe(takeUntilDestroyed())
            .subscribe(() => this.context.$implicit.complete());
    }
 
    protected onClick(response: boolean): void {
        this.context.completeWith(response);
    }
}
    

        
            Copy
        
        
    

    
<!-- Add id for accessibility purposes -->
<h2 [id]="context.id">{{ context.heading }}</h2>
<section>
    <!-- TODO: Polymorpheus fix type -->
    <ng-container *polymorpheusOutlet="$any(context.content) as text; context: context">
        {{ text }}
    </ng-container>
</section>
<p class="buttons">
    <button
        tuiButton
        type="button"
        class="tui-space_right-3"
        (click)="onClick(true)"
    >
        {{ context.buttons[0] }}
    </button>
    <button
        appearance="secondary"
        tuiButton
        type="button"
        (click)="onClick(false)"
    >
        {{ context.buttons[1] }}
    </button>
</p>
    

        
            Copy
        
        
    

    
:host {
    display: block;
    padding: 1.5rem;
    margin: auto;
    border-radius: 0 0 0.75rem 0.75rem;
    background: var(--tui-background-base);
    box-shadow: inset 0 4px var(--tui-background-accent-2);
    animation:
        tuiReveal var(--tui-duration),
        tuiFadeIn var(--tui-duration);
}
 
.buttons {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 0;
}
    

        
            Copy