import { Component, ViewChild } from '@angular/core';
import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-root',
  imports: [DialogModule],
  template: `
    <div id="dialog-container" style="height: 500px;">
      <button class="e-control e-btn" (click)="onOpenDialog()">
        Open Dialog
      </button>
      
      <ejs-dialog 
        #ejDialog
        target="#dialog-container"
        [showCloseIcon]="true"
        width="400px"
        content="This is a Dialog content"
      >
        <ng-template #header>
          <div class="e-dlg-header-content">
            <span>Dialog Title</span>
          </div>
        </ng-template>
      </ejs-dialog>
    </div>
  `
})
export class AppComponent {
  @ViewChild('ejDialog') ejDialog!: DialogComponent;

  onOpenDialog(): void {
    this.ejDialog.show();
  }
}

#dialog-container {
  height: 500px;
}

// Create a modal dialog for confirmation
<ejs-dialog 
  [isModal]="true"
  [showCloseIcon]="true"
  width="350px"
  content="Are you sure you want to delete this item?"
>
  <ng-template #footer>
    <button class="e-control e-btn e-primary" (click)="onConfirm()">
      Yes, Delete
    </button>
    <button class="e-control e-btn" (click)="onCancel()">
      Cancel
    </button>
  </ng-template>
</ejs-dialog>

// Dialog containing a reactive form
<ejs-dialog [showCloseIcon]="true" width="450px">
  <form [formGroup]="form">
    <div class="e-dlg-content">
      <input formControlName="name" placeholder="Enter name" />
      <input formControlName="email" placeholder="Enter email" />
    </div>
  </form>
  
  <ng-template #footer>
    <button class="e-control e-btn e-primary" (click)="onSubmit()">
      Submit
    </button>
  </ng-template>
</ejs-dialog>

// Dialog positioned at a specific location
<ejs-dialog 
  [position]="{ X: 100, Y: 50 }"
  width="400px"
  content="Positioned Dialog"
>
</ejs-dialog>

ng add @syncfusion/ej2-angular-popups

// src/app/app.ts
import { Component } from '@angular/core';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DialogModule, ButtonModule],
  template: `
    <button ejs-button cssClass="e-danger" (click)="showAlert()">Alert</button>
    <button ejs-button cssClass="e-success" (click)="showConfirm()" style="margin-left:8px">Confirm</button>
    <button ejs-button [isPrimary]="true" (click)="showPrompt()" style="margin-left:8px">Prompt</button>
  `
})
export class App {
  showAlert(): void {
    DialogUtility.alert({
      title: 'Warning',
      content: 'Disk space is running low.',
      width: '280px'
    });
  }

  showConfirm(): void {
    const dlg = DialogUtility.confirm({
      title: 'Delete Item',
      content: 'Are you sure you want to delete this item?',
      width: '300px',
      okButton: { text: 'Yes', click: () => { dlg.hide(); /* handle confirm */ } },
      cancelButton: { text: 'No', click: () => { dlg.hide(); } }
    });
  }

  showPrompt(): void {
    const dlg = DialogUtility.confirm({
      title: 'Enter Name',
      content: '<p>Your name:</p><input id="nameInput" class="e-input" type="text" placeholder="Type here..." />',
      width: '300px',
      okButton: {
        text: 'Submit',
        click: () => {
          const value = (document.getElementById('nameInput') as HTMLInputElement).value;
          dlg.hide();
          // use value
        }
      },
      cancelButton: { text: 'Cancel', click: () => dlg.hide() }
    });
  }
}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material3.css';

DialogUtility.confirm({
  title: 'Delete Files',
  content: 'Permanently delete selected files?',
  width: '300px',
  okButton: { text: 'Yes', icon: 'e-icons e-check' },
  cancelButton: { text: 'No', icon: 'e-icons e-close' }
});

DialogUtility.alert({
  title: 'Session Expired',
  content: 'Your session has expired. Please log in again.',
  width: '300px',
  showCloseIcon: true,
  closeOnEscape: true
});

DialogUtility.confirm({
  title: 'Confirm Action',
  content: 'Submit the form?',
  isModal: true,
  position: { X: 'center', Y: 'center' },
  animationSettings: { effect: 'Zoom' },
  isDraggable: true,
  width: '280px'
});

ng add @syncfusion/ej2-angular-popups

// src/app/app.ts (Angular 19+ standalone)
import { Component, ViewEncapsulation } from '@angular/core';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';

@Component({
  standalone: true,
  imports: [TooltipModule],
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-tooltip content="Hello, I am a Tooltip!" position="BottomCenter">
      <button>Hover me</button>
    </ejs-tooltip>
  `
})
export class App {}

/* styles.css */
@import "@syncfusion/ej2-base/styles/material3.css";
@import "@syncfusion/ej2-angular-buttons/styles/material3.css";
@import "@syncfusion/ej2-angular-popups/styles/material3.css";

<!-- Wraps a container; target selector picks which children get tooltips -->
<ejs-tooltip target=".has-tip">
  <div id="container">
    <button class="has-tip" title="Save your work">Save</button>
    <button class="has-tip" title="Delete selected item">Delete</button>
    <button>No tooltip here</button>
  </div>
</ejs-tooltip>

<ejs-tooltip content="Clicked!" opensOn="Click" position="RightCenter">
  <button>Click me</button>
</ejs-tooltip>

<ejs-tooltip content="I stay until you close me." [isSticky]="true">
  <span>Hover and pin me</span>
</ejs-tooltip>

public htmlContent: string = '<b>Bold</b> and <i>italic</i> text with a <a href="#">link</a>.';

<ejs-tooltip [content]="htmlContent">
  <button>Rich content</button>
</ejs-tooltip>

@ViewChild('tooltip') tooltip!: TooltipComponent;

openTip(): void {
  this.tooltip.open(this.tooltip.element);
}
closeTip(): void {
  this.tooltip.close();
}

<ejs-tooltip #tooltip content="Custom trigger" opensOn="Custom">
  <span>Target</span>
</ejs-tooltip>
<button (click)="openTip()">Show</button>
<button (click)="closeTip()">Hide</button>