NgShowcase

Ng - Dialog

Usage

Need to assign ViewContainerRef first, for creating dynamic components through Service as below: constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { this.dialogService.ViewContainerRef = viewContainerRef; }

constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) {
  this.dialogService.ViewContainerRef = viewContainerRef;
}

Prompt

  <button class="Btn Btn-outline-primary" (click)="Prompt()">Prompt</button>
  <button class="Btn Btn-outline-primary" (click)="Prompt(true)">Prompt Forced</button>

  constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) {
    this.dialogService.ViewContainerRef = viewContainerRef;
  }

  Prompt(Forced: boolean = false): void {
    this.dialogService.Prompt({Title: 'Prompt Title', InnerHtml: 'Prompt Body'}, Forced)
      .subscribe((res: DialogResponse) => console.log('Prompt', res));
  }

With Html Content

        <button class="Btn Btn-outline-primary" (click)="GoToCart()">GoToCart</button>

  htmlContent = `
  <div class="Row">
      <div class="Col-3">
        <p class="Text-center MT-3"><i class="fa-solid fa-cart-shopping fa-4x fa-spin"></i></p>
      </div>
      <div class="Col-9">
        <p>Do you need more time to make a purchase decision?</p>
        <p>No pressure, your product will be waiting for you in the cart.</p>
      </div>
    </div>
  `;

  constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) {
    this.dialogService.ViewContainerRef = viewContainerRef;
  }

  GoToCart() {
    const href = '/Lootstrap/Components/Modal';
    this.dialogService.Redirect({Title: 'Product in the cart', InnerHtml: this.htmlContent}, href, 'Go to cart', false)
      .subscribe((res: DialogResponse) => console.log('Redirect', res));
  }