Angular'da 4 Farklı Yöntemle Popup Nasıl Oluşturulur? (2026 Rehberi)

Angular 2026'da 22. sürümde (Ekim 2026'da kontrol ettiğimizde 22.2) ve Angular 19'dan bu yana popup oluşturma biçimi epey değişti: standalone bileşenler, signal'ler, @if kontrol akışı, zone.js'siz değişiklik algılama ve yeni @Service() dekoratörü. Temel soru ise aynı: uygulamanızda bir modal, toast, tooltip ya da yan panel gerektiğinde hangi kütüphaneye uzanacaksınız? Bu rehber, gerçek bir uygulamada iş gören dört yolu tam kod, sürüm notları ve aralarındaki ödünleşimlerle anlatıyor. Aşağıdaki her kod parçası 2 Ekim 2026'da sıfırdan kurulmuş bir Angular 22 projesinde ng build ile derlendi ve çalıştırıldı.

Başlamadan önce ihtiyacınız olanlar:

• Angular CLI 22 (npm install -g @angular/cli). Yeni Angular 22 projeleri varsayılan olarak standalone ve zone.js'siz kuruluyor; aşağıdaki her yöntem ikisiyle de çalışıyor.

• Node.js 22.22.3 veya sonrası ya da 24.15 veya sonrası. Angular 22 CLI daha eski sürümlerde çalışmayı reddediyor; bu örnekleri hazırlarken Node 24.10'u reddetti.

• TypeScript ve Angular bileşenleri hakkında temel bilgi (1-3. yöntemler için); 4. yöntem için gerekmez

• Seviye: Kodlu yöntemler için başlangıç-orta seviye; Popupsmart için başlangıç

Kısa özet: öğreneceğiniz dört yöntem:

1. Angular Material (MatDialog): Angular ekibinin geliştirdiği, Google'ın resmi bileşen kütüphanesi. Material Design kullanan kurumsal uygulamalar için en uygunu.

2. Ng-bootstrap (NgbModal): Bootstrap işaretlemesi üzerine kurulu yerel Angular bileşenleri. Tasarım sisteminiz Bootstrap tabanlıysa en uygunu.

3. PrimeNG (p-dialog): PrimeNG'nin kendi sayımıyla 90+ bileşenli, zengin özellikli bir arayüz paketi. Duyarlı, animasyonlu ve temaya dayalı popup'lar için en uygunu.

4. Popupsmart (kodsuz embed): Script etiketiyle eklenen, barındırılan bir popup oluşturucu. Pazarlama kampanyaları, MVP prototipleri ve bileşen ağacınıza bağlı olmayan her şey için en uygunu.

Angular'da popup nedir?

Angular'da popup, dikkat çekmek, kullanıcıdan bilgi almak ya da bir mesaj göstermek için sayfanın üstünde beliren küçük bir katman penceredir. Framework'ün kendine ait, stili hazır bir "popup" öğesi yok. Bunun yerine bir bileşen kütüphanesine (Material, Ng-bootstrap, PrimeNG), @angular/cdk/dialog içindeki stilsiz CDK Dialog'a ya da bir signal ile yönetilen tarayıcının yerel <dialog> öğesine başvurursunuz.

"Popup" kelimesi geniş bir anlam taşır. Pratikte her Angular uygulamasında karşılaşacağınız altı yaygın popup türünü kapsar:

Modal diyaloglar. Kullanıcı bir işlem yapana kadar sayfanın geri kalanını kilitleyen, arka plan katmanlı tam bir katman. Angular Material'ın MatDialog servisi bunun bilinen örneğidir.

Toast'lar ve snackbar'lar. İçeri kayan, tek bir bilgi verip kaybolan kısa mesajlar. Bunlar için MatSnackBar kullanın: sayfayı kilitlemezler ve kendiliğinden kapanırlar.

Tooltip'ler. Fareyle üzerine gelindiğinde ya da odaklanıldığında görünen küçük etiket. matTooltip ile ya da @if ve bir mouseenter bağlamasıyla elle yapılır.

Açılır menüler. Tıklanınca bağlı bir liste açan tetikleyici. @for ile özel bileşenlerle, Material'ın mat-menu bileşeniyle ya da Ng-bootstrap'taki ngbDropdown direktifiyle yapılır.

Akordeonlar. Angular direktifleri ve durum değişkenleriyle yönetilen açılıp kapanan paneller.

Yan paneller (drawer'lar). Ekranın kenarından kayarak açılan paneller; genellikle bir Angular rotasına ya da Material'ın MatSidenav bileşenine bağlanır.

Gerçek bir Angular uygulaması çoğu zaman bunların birkaçını bir arada kullanır. Kütüphane kullanmanın amacı tutarlı davranış elde etmektir: klavye kullanımını, ARIA rollerini ve animasyon zamanlamasını her bileşen için yeniden kurmazsınız.

Angular'da popup oluşturmanın 4 yolu

Aşağıdaki dört adım adım yöntem aynı işi yapar (bir diyalog açmak, içerik göstermek, tıklamayla kapatmak) ve bunu Angular Material, Ng-bootstrap, PrimeNG ve kodsuz Popupsmart embed koduyla yapar. Her kod örneği, katı şablon denetimi açık, sıfırdan kurulmuş bir Angular 22.2 projesinde derlediğimiz dosyanın aynısıdır. Ardından her popup'ı başsız (headless) bir Chromium tarayıcıda açtık, Esc ile ve bir butonla kapattık.

Teknoloji yığınınıza ve seviyenize uyanı seçin. Sıfırdan bir Angular paneli kuruyorsanız Material en güvenli varsayılandır. Ön yüzünüz zaten Bootstrap temalıysa Ng-bootstrap sizi yeniden tema giydirmekten kurtarır. Kutudan çıktığı gibi zengin animasyon ve tema istiyorsanız PrimeNG üçü içinde en kapsamlısıdır. Popup bir kampanya ya da test sayfası içinse ve sürece bir geliştirici katmak istemiyorsanız, kodsuz seçenek her CLI kurulumundan hızlıdır.

1. Adım: Angular Material (MatDialog) ile popup oluşturun

Angular Material, Google'ın resmi bileşen kütüphanesidir. MatDialog, bir bileşen ve bir servise bölünmüş yaklaşık 30 satır kodla erişilebilir bir modal verir (odak tuzağı, arka plan katmanı, Esc ile kapatma, ARIA rolleri). Material Design token'ları kullanan her uygulamada başvurulacak yöntem budur.

Kütüphane kapsamı. Angular Material 22.2 (Ekim 2026'da kontrol edildi) Angular 22 gerektiriyor. Sürümleri Angular'ınkini takip ediyor; Angular 21 kullanıyorsanız @angular/material@21 kurun. open() çağrısı eski rehberlerdekiyle aynı görünüyor. Değişen, çevresindeki bağlantılar: standalone import'lar, constructor yerine inject() ve sonuç için bir signal.

Adım 1.1: Angular Material'ı kurun

Proje kök dizininde terminali açın ve şunu çalıştırın:

ng add @angular/material

Schematic, Material ile CDK'yı kurar, mat.theme() kullanan bir Material 3 temasını src/material-theme.scss dosyasına yazar ve Roboto ile Material Symbols fontlarını index.html dosyasına ekler. Artık animasyonlarla ilgili soru sormuyor: Material 22, @angular/animations paketini hiç kullanmıyor.

Adım 1.2: Popup bileşenini oluşturun

Diyalog bileşeninin iskeletini CLI ile oluşturun:

ng generate component popup

Angular 22'de bu komut src/app/popup/popup.ts, popup.html ve popup.css dosyalarını ve Popup adında standalone bir sınıf oluşturur. Yeni CLI sürümleri artık .component son ekini eklemiyor.

Adım 1.3: Popup içeriğini tanımlayın

popup.html dosyasını açın ve hazır şablonu Material diyalog şablonuyla değiştirin:

<h2 mat-dialog-title>Popup Dialog</h2>
<mat-dialog-content>
  <p>This is a popup dialog created using Angular Material.</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button matButton [mat-dialog-close]="false">Close</button>
  <button matButton="filled" [mat-dialog-close]="true">OK</button>
</mat-dialog-actions>

mat-dialog-title diyaloğa erişilebilir adını verir, [mat-dialog-close] ise diyaloğu bağladığınız değerle kapatır. Ardından şablonun kullandığı direktifleri popup.ts içinde listeleyin:

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogTitle,
} from '@angular/material/dialog';

@Component({
  selector: 'app-popup',
  imports: [MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose],
  templateUrl: './popup.html',
})
export class Popup {}

Adım 1.4: Popup servisini oluşturun

Bir servis, açma ve kapatma mantığını bileşenlerinizin dışında tutar ve diyaloğu yeniden kullanılabilir yapar:

ng generate service popup/popup --type=service

--type=service olmadan Angular 22 CLI dosyayı popup.ts, sınıfı da Popup olarak adlandırır; bu da bileşenle çakışır.

Adım 1.5: popup.service.ts dosyasını düzenleyin

MatDialog servisini servise bağlayın:

import { Service, inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Popup } from './popup';

@Service()
export class PopupService {
  private readonly dialog = inject(MatDialog);

  openPopup() {
    return this.dialog.open<Popup, void, boolean>(Popup, { width: '400px' });
  }
}

Angular servis rehberine göre @Service() Angular 22 ile geldi ve @Injectable({ providedIn: 'root' }) için bir kısayol. Angular 21 veya öncesinde onun yerine @Injectable({ providedIn: 'root' }) kullanın.

Adım 1.6: Servisi bileşeninizde kullanın

src/app/app.ts dosyasını, popup'ı açan ve sonucu gösteren bir butonla değiştirin:

import { Component, inject, signal } from '@angular/core';
import { PopupService } from './popup/popup.service';

@Component({
  selector: 'app-root',
  template: `
    <button type="button" (click)="openPopup()">Open Popup</button>
    @if (answer() !== undefined) {
      <p>The dialog closed with: {{ answer() }}</p>
    }
  `,
})
export class App {
  private readonly popupService = inject(PopupService);
  protected readonly answer = signal<boolean | undefined>(undefined);

  openPopup() {
    this.popupService
      .openPopup()
      .afterClosed()
      .subscribe((result) => this.answer.set(result));
  }
}

Sonuç bir signal'e yazıldığı için uygulama zone.js olmadan çalışsa da şablon güncellenir. afterClosed() bir değer yaydıktan sonra kendiliğinden tamamlanır, bu yüzden bu aboneliği temizlemeniz gerekmez.

Adım 1.7: Her bileşenin kullandığını import edin (NgModule gerekmez)

Standalone bileşenler, şablonlarının kullandığı şeyleri kendileri import eder. Popup buton modülünü ve dört diyalog direktifini listeler; App hiçbir şey import etmez, çünkü MatDialog kökten inject edilebilir. Uygulamanız hâlâ NgModule kullanıyorsa MatDialogModule öğesini modülün import'larına ekleyin ya da geçiş için ng generate @angular/core:standalone komutunu çalıştırın.

Adım 1.8: Popup'ınızı çalıştırın

Geliştirme sunucusunu ng serve ile başlatın ve butona tıklayın. Diyalog açılmalı, odak içeri geçmeli ve Esc'ye basınca ya da arka plana tıklayınca kapanmalı.

Çalıştığını şuradan anlarsınız: sayfa yarı saydam bir arka planla kararır, diyalog yumuşak bir geçişle ortada belirir, odak içindeki ilk odaklanabilir öğeye atlar ve Esc'ye basınca diyalog kapanıp odak tetikleyici butona geri döner. OK'e tıklamak The dialog closed with: true yazdırır; Esc ile kapatınca sonuç undefined kalır.

Adım 1.9: Modal yerine bildirim mi lazım?

Kısa ve sayfayı kilitlemeyen bir mesaj için MatSnackBar inject edin:

import { Component, inject } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-save-button',
  template: `<button type="button" (click)="save()">Save</button>`,
})
export class SaveButton {
  private readonly snackBar = inject(MatSnackBar);

  save() {
    this.snackBar.open('Changes saved', 'Undo', { duration: 4000 });
  }
}

Snackbar dört saniye sonra kaybolur ve Material mesajı CDK'nın LiveAnnouncer servisi üzerinden ekran okuyuculara iletir.

Bu hatalara dikkat edin:

• Eski animasyon tavsiyesine uymak: Angular 20 öncesinde yazılan rehberler Material için BrowserAnimationsModule veya provideAnimations() import etmenizi söyler. Material 22'nin ikisine de ihtiyacı yok: diyalog CSS ile, açılırken 150 ms, kapanırken 75 ms süren bir animasyon oynatır. Diyalog hiç animasyonsuz açılıyorsa önce cihaz ayarlarına bakın, çünkü prefers-reduced-motion açık olduğunda Material animasyonlarını kapatıyor.

• Direktif import'larını unutmak: Diyalog direktiflerini kullanan şablonun bileşeni onları import etmeli. [mat-dialog-close] gibi bir bağlama derlemeyi "Can't bind to 'mat-dialog-close'" hatasıyla durdurur, ama mat-dialog-title gibi düz bir öznitelik sessizce yok sayılır; diyalog hata vermeden erişilebilir adını kaybeder.

• Tema CSS'ini atlamak: ng add komutu angular.json dosyasını kendiliğinden güncelleyemediyse diyalog Material stilleri olmadan açılır ve stilsiz bir <div> gibi görünür. src/material-theme.scss dosyasını ya da @angular/material/prebuilt-themes/azure-blue.css gibi hazır bir temayı styles dizisine ekleyin.

2. Adım: Ng-bootstrap (NgbModal) ile popup oluşturun

Tasarım sisteminiz zaten Bootstrap temalıysa Ng-bootstrap, Material'dan daha temiz bir seçimdir. Bootstrap 5 işaretlemesine uyan yerel Angular direktifleri sunar, böylece popup yeniden tema giydirmeden uygulamanızın geri kalanıyla aynı görünür. NgbModal servisi, kütüphanenin diyalog yapı taşıdır. Aynı modalı Angular olmadan Bootstrap popup rehberimizde anlattık.

Kütüphane kapsamı. Ng-bootstrap 21 Angular 22'yi destekliyor; v20 Angular 21'i, v19 Angular 20'yi, v18 de Angular 19'u destekliyor (npm üzerinde Ekim 2026'da kontrol edildi). Angular sürümünüze uyan ana sürümü sabitleyin, yoksa kurulum bir peer-dependency hatasıyla durur.

Adım 2.1: Ng-bootstrap'ı kurun

Bootstrap CSS import'larını CLI'ın halletmesi için ng add kullanın:

ng add @ng-bootstrap/ng-bootstrap

Bu komut Bootstrap'ı, Ng-bootstrap modülünü ve @angular/localize paketini (bir peer bağımlılığı) kurar, CSS referansını angular.json dosyasına ekler ve Ng-bootstrap'ın provider'larını app.config.ts içine kaydeder.

Adım 2.2: Popup içerik bileşenini oluşturun

Material akışındaki düzenin aynısı: önce bir bileşen iskeleti oluşturun. Modal bu bileşeni içinde gösterecek:

ng generate component popup-content

Adım 2.3: NgbModule import'unu atlayın

Eski rehberler NgbModule öğesini bir NgModule'ün import'larına ekler. Standalone bir uygulamada modallar için import edilecek bir şey yok: NgbModal, inject ettiğiniz kök düzeyde bir servis ve provider'ları ng add zaten kaydetti. NgModule tabanlı bir uygulamayı sürdürüyorsanız NgbModalModule öğesini ana modülde import edin.

Adım 2.4: Popup şablonunu ekleyin

popup-content.ts dosyasını, Bootstrap'ın modal işaretlemesini kullanan bir bileşenle değiştirin:

import { Component, inject } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-popup-content',
  template: `
    <div class="modal-header">
      <h2 class="modal-title fs-5" id="popup-title">Popup Content</h2>
      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('close')"></button>
    </div>
    <div class="modal-body">
      <p>This is the content of the popup.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss('cancel')">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="activeModal.close('confirmed')">Confirm</button>
    </div>
  `,
})
export class PopupContent {
  protected readonly activeModal = inject(NgbActiveModal);
}

NgbActiveModal, içeriğin modalı bir sonuçla kapatmak (close) ya da bir gerekçeyle iptal etmek (dismiss) için kullandığı tutamaçtır. Başlığın id değeri, açan tarafın ariaLabelledBy olarak ilettiği değerdir.

Adım 2.5: Tetikleyici butonu oluşturun ve modal servisini bağlayın

Kök şablonunuza açma işleyicisini çağıran bir buton ekleyin, NgbModal inject edin ve popup bileşeninin referansıyla open() çağırın:

import { Component, inject, signal } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PopupContent } from './popup-content/popup-content';

@Component({
  selector: 'app-root',
  template: `
    <button type="button" class="btn btn-primary" (click)="openPopup()">Click me</button>
    <p>Last result: {{ lastResult() }}</p>
  `,
})
export class App {
  private readonly modalService = inject(NgbModal);
  protected readonly lastResult = signal('none yet');

  openPopup() {
    const modalRef = this.modalService.open(PopupContent, { ariaLabelledBy: 'popup-title' });
    modalRef.result.then(
      (result) => this.lastResult.set(`closed: ${result}`),
      (reason) => this.lastResult.set(`dismissed: ${reason}`),
    );
  }
}

Adım 2.6: Popup'ınızı çalıştırın

Geliştirme sunucusunu başlatın:

ng serve

Çalıştığını şuradan anlarsınız: butona tıklayınca modal, Bootstrap'ın standart geçiş animasyonuyla görünür, arka plan sayfayı karartır, arka plana tıklamak ya da Esc'ye basmak modalı kapatır ve odağı butona geri verir. Sayfada ardından dismissed: 1 (1, ModalDismissReasons.ESC değeridir) ya da Confirm'den sonra closed: confirmed yazar.

Bu hatalara dikkat edin:

• Uyumsuz Bootstrap CSS sürümü: Projeniz zaten Bootstrap 4 import ediyorsa ve Ng-bootstrap Bootstrap 5 kurarsa grid sınıfları çakışır ve modalın konumu kayar. Tek bir Bootstrap ana sürümü seçin ve diğerini angular.json dosyasından kaldırın.

• open() fonksiyonunu metin şablonuyla çağırmak: NgbModal.open() hem bileşen referanslarını hem TemplateRef kabul eder. Bir metin (string) HTML olarak değil düz metin olarak gösterilir. Her zaman import ettiğiniz bileşen sınıfını ya da viewChild() ile okunan bir #ref şablonunu verin.

• ariaLabelledBy seçeneğini atlamak: Bu seçenek olmadan modal penceresinin role="dialog" rolü olur ama erişilebilir bir adı olmaz; ekran okuyucu yalnızca "dialog" der. Başlığa bir id verin ve bunu open() seçeneklerinde iletin.

3. Adım: PrimeNG (p-dialog) ile popup oluşturun

PrimeNG, dokümantasyon sitesinde 90+ bileşen listeliyor ve üç kodlu kütüphane içinde animasyon ve tema tarafı en olgun olanı. p-dialog bileşeni (ve dinamik diyaloglar için ilgili DialogService) basit bir modaldan, özel başlık ve altbilgili, sürüklenebilir, yeniden boyutlandırılabilir, birden fazla örnekli diyaloglara kadar her şeyi karşılar.

Kütüphane kapsamı. PrimeNG'nin ana sürümü Angular'ınkiyle eşleşiyor: PrimeNG 22.1 Angular 22'yi (22.1'den itibaren), v21 Angular 21'i, v20 Angular 20'yi destekliyor. Tema modeli de değişti: Aura, Lara ve Nora gibi hazır temalar artık ayrı @primeuix/themes paketinde geliyor ve eski primeng/resources/themes/... CSS dosyaları PrimeNG 22'de yok.

Adım 3.1: PrimeNG'yi ve temalarını kurun

npm install primeng @primeuix/themes

PrimeIcons (primeicons), pi pi-* ikon sınıfları için ayrı ve isteğe bağlı bir paket.

Adım 3.2: Temayı kaydedin

src/app/app.config.ts dosyasına hazır bir temayla providePrimeNG() ekleyin:

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes),
    providePrimeNG({ theme: { preset: Aura } }),
  ],
};

PrimeNG 22'nin provideAnimationsAsync() çağrısına da ihtiyacı yok: bileşenlerinin hiçbiri @angular/animations import etmiyor ve test uygulamamız diyaloglarını bu paket kurulu değilken çalıştırdı.

Adım 3.3: p-dialog bileşenini ekleyin

DialogModule import edin ve diyaloğun görünürlüğünü bir signal'e bağlayın:

import { Component, signal } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { DialogModule } from 'primeng/dialog';

@Component({
  selector: 'app-root',
  imports: [ButtonModule, DialogModule],
  template: `
    <button #trigger type="button" (click)="visible.set(true)">Show Popup</button>
    <p-dialog
      header="Popup Content"
      [(visible)]="visible"
      [modal]="true"
      [style]="{ width: '25rem' }"
      (onHide)="trigger.focus()"
    >
      <label for="popup-name">Enter your information:</label>
      <input id="popup-name" type="text" placeholder="Name" />
      <p-button label="Close" (onClick)="visible.set(false)" />
    </p-dialog>
  `,
})
export class App {
  protected readonly visible = signal(false);
}

PrimeNG 22'de visible bir model signal olduğundan [(visible)] doğrudan bir signal() değerine bağlanır. Esc ve diyaloğun kapatma ikonu onu yeniden false yapar. (onHide) satırı önemli: testimizde PrimeNG 22 odağı diyaloğun içine taşıdı, ama diyalog kapanınca odağı sayfanın gövdesine (body) bıraktı; bu yüzden örnek odağı butona kendisi geri veriyor.

Adım 3.4: Popup içerik bileşenini oluşturun

Koddan açtığınız diyaloglar için diyalog içeriğini tutan bir bileşen tanımlayın (popup-content.ts):

import { Component, inject } from '@angular/core';
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';

@Component({
  selector: 'app-popup-content',
  template: `
    <label for="dd-name">Enter your information, {{ config.data?.greeting }}:</label>
    <input #name id="dd-name" type="text" placeholder="Name" />
    <button type="button" (click)="ref.close(name.value)">Save</button>
  `,
})
export class PopupContent {
  protected readonly ref = inject(DynamicDialogRef);
  protected readonly config = inject(DynamicDialogConfig);
}

Adım 3.5: DialogService ile açın

Yanındaki bir kapsayıcı bileşende (popup-host.ts), primeng/dynamicdialog paketinden DialogService inject edin ve popup'ı yapılandırmayla açın:

import { Component, inject, signal } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';
import { PopupContent } from './popup-content';

@Component({
  selector: 'app-popup-host',
  providers: [DialogService],
  template: `
    <button #trigger type="button" (click)="showPopup(trigger)">Show Popup</button>
    @if (savedName()) {
      <p>Saved: {{ savedName() }}</p>
    }
  `,
})
export class PopupHost {
  private readonly dialogService = inject(DialogService);
  protected readonly savedName = signal('');

  showPopup(trigger: HTMLButtonElement) {
    const ref = this.dialogService.open(PopupContent, {
      header: 'Popup Title',
      width: '70%',
      modal: true,
      closable: true,
      contentStyle: { 'max-height': '500px', overflow: 'auto' },
      data: { greeting: 'friend' },
    });

    ref?.onClose.subscribe((name?: string) => {
      if (name) this.savedName.set(name);
      trigger.focus();
    });
  }
}

PrimeNG 22'de open(), DynamicDialogRef | null döndürüyor; ?. bu yüzden var. Dinamik diyaloglar closable: true ayarlamadığınız sürece kapatma ikonu göstermez ve onClose, diyalog kapandıktan kısa süre sonra tamamlanır. trigger.focus() çağrısı, Adım 3.3'teki nedenle odağı butona geri verir.

Adım 3.6: Popup'ınızı çalıştırın

ng serve

Çalıştığını şuradan anlarsınız: diyalog Aura temasının başlık çubuğuyla açılır, odak içeri geçer, Esc diyaloğu kapatır ve odağı Show Popup butonuna geri koyar. Dinamik sürümde bir isim yazıp Save'e basınca diyalog kapanır ve yazdığınız isim Saved: ile gösterilir.

Bu hatalara dikkat edin:

• PrimeNG 17 dönemi rehberlerdeki eski tema yolları: Eski eğitimler angular.json dosyasına node_modules/primeng/resources/themes/saga-blue/theme.css ekler. Bu klasör PrimeNG 22'de yok; onun yerine providePrimeNG() içinde hazır bir tema ayarlayın.

• DialogService'i providers dizisi olmadan kullanmaya çalışmak: DialogService, MatDialog gibi kök düzeyde bir servis değil. Kapsayıcı bileşenin providers dizisine eklemeniz gerekir, yoksa "NullInjectorError: No provider for DialogService" hatası alırsınız.

• BrowserAnimationsModule'ü alışkanlıkla tutmak: Bir şeyi bozmaz, ama PrimeNG 22'nin ona ihtiyacı yok; @angular/animations paketini dışarıda bırakmak, kullanımdan kaldırılmış bu paketi bundle'ınızdan da çıkarır.

Üç kodlu kütüphanede de (Material, Ng-bootstrap, PrimeNG) adımlar aynı kalıbı izler: kütüphaneyi kurun, popup'ı standalone bir bileşen olarak yazın, bir tıklama işleyicisinden açın ve sonucu bir signal'e alın. Farklar stil varsayılanlarında ve API'nin size hazır verdiği ek özelliklerdedir.

4. Adım: Popupsmart ile kodsuz popup oluşturun

Popup bileşen ağacınıza bağlı değilse (örneğin bir pazarlama sayfasındaki bülten kaydı, bir kampanya için indirim banner'ı ya da hızlı bir MVP testi), kodsuz bir popup oluşturucu bir kütüphane kurup servis yazmaktan daha hızlıdır. Popupsmart kodsuz bir popup oluşturucudur: popup'ı görsel düzenleyicisinde hazırlar, Angular uygulamanızın index.html dosyasına tek bir script etiketi yapıştırırsınız.

Önemli bir uyarı: popup'ın Angular bileşen yaşam döngüsüne katılması, servislerle durum paylaşması ya da içinde Angular bileşenleri göstermesi gerekiyorsa bu yöntem MatDialog, NgbModal veya p-dialog yerine geçmez. Veri katmanınıza bağlı uygulama içi modallar için yukarıdaki üç kodlu yöntemden birini kullanın.

Adım 4.1: Hesap açın

Platformda bir hesap oluşturun. Ayda 5K sayfa gösterimini kapsayan ücretsiz bir plan var; prototipler ve küçük kampanyalar için yeterli.

Adım 4.2: Şablon seçin

Hedefe uyan bir popup şablonu seçin: e-posta toplama, indirim teklifi, çıkış niyetiyle geri kazanma ya da geri bildirim anketi.

Adım 4.3: Metni, tasarımı ve tetikleyicileri özelleştirin

Başlığı, gövde metnini, buton yazısını, renkleri ve kuralları (sayfa hedefleme, çıkış niyeti, zaman gecikmesi, kaydırma derinliği) görsel düzenleyicide değiştirin; kurallar kampanyanın Segment bölümünde. Kampanyayı kaydedin.

Adım 4.4: Embed kodunu Angular projenize ekleyin

Panelin sol çubuğunda Embed Kodu'na tıklayın ve kodu kopyalayın. src/index.html dosyasında kapanan </body> etiketinin hemen önüne yapıştırın, ardından alan adınızı ekleyip doğrulayın; Popupsmart yardım merkezindeki embed kodu rehberi adımları gösteriyor.

Adım 4.5: Yayınlayın ve test edin

Panelde yayınla'ya basın, Angular geliştirme sunucunuzu yeniden yükleyin ve popup'ı belirlediğiniz kurallarla tetikleyin (örneğin sayfanın %50'sine kaydırarak).

Adım 4.6: Bir Angular butonundan açın (isteğe bağlı)

Kampanyanın Segment bölümünde Kullanıcı Davranışı altındaki Tıklamaya Duyarlı Hedefleme'yi açın, oluşturduğu koddaki kampanya kimliğini kopyalayın ve bir tıklama işleyicisinden window.ps.show() çağırın:

import { Component } from '@angular/core';

declare global {
  interface Window {
    ps?: { show(options: { id: number }): void };
  }
}

// Copy the campaign id from the snippet Popupsmart generates under On-Click Targeting.
const CAMPAIGN_ID = 12345;

@Component({
  selector: 'app-newsletter-button',
  template: `<button type="button" (click)="openCampaign()">Get the newsletter</button>`,
})
export class NewsletterButton {
  openCampaign() {
    window.ps?.show({ id: CAMPAIGN_ID });
  }
}

İsteğe bağlı zincirleme (?.), embed kodu yüklenmeden önce butonun hata vermemesini sağlar. Popupsmart'ın yardım merkezi, show() çağrısını başka bir sayfaya giden bağlantılarda ya da butonlarda kullanmamanızı öneriyor.

Çalıştığını şuradan anlarsınız: popup, konsolda hata olmadan Angular uygulamanızın üstünde görünür ve Popupsmart panelindeki kampanyanın Analitik sayfası popup görüntülemelerini saymaya başlar.

Bir yapay zekâ kodlama ajanıyla çalışıyorsanız, Popupsmart'ın MCP sunucusu ve CLI aracı ajanın uygulamanın arayüzünde yapılan her şeyi yapmasını sağlar: şablondan popup oluşturmak, hedefleme ve tetikleyicileri ayarlamak, entegrasyonları bağlamak ve yayınlamak. Bu, ücretsiz plan dahil her planda geçerli.

Bu hatalara dikkat edin:

• Script'i bir bileşen şablonuna yapıştırmak: Angular, bileşen şablonlarındaki <script> etiketlerini temizler ve bunlar çalışmaz. Script'i index.html dosyasına (Angular kökünün dışına) koyun, normal şekilde yüklenir.

• Angular bileşen yaşam döngüsü kancalarını beklemek: Popup, Angular uygulamanızdan ayrı bir DOM ağacında yaşar. Ona viewChild() ile ulaşamazsınız, o da Angular servislerini doğrudan okuyamaz. Lead'lerin kendi backend'inize gelmesi gerekiyorsa onları Popupsmart'ın webhook entegrasyonuyla gönderin.

• Sayfa düzeyinde hedeflemeyi unutmak: URL kuralı olmadan popup, yönetim sayfalarınız dahil her rotada açılır. Yol tabanlı hedeflemeyi kampanyanın Segment bölümünde URL Hedefleme altında ayarlayın. Angular router URL'yi sayfa yüklemeden değiştirdiği için kuralı yalnızca sayfayı yenileyerek değil, uygulama içinde gezinerek de test edin.

Popup'ları neden Angular ile oluşturmalısınız?

Bir kütüphane seçtikten sonra işin çoğunu Angular'ın yapısı halleder. Geliştiricilerin elle yazılmış bir vanilla JS modalı yerine Angular'ı seçmesinin birkaç somut nedeni:

• Bileşen tabanlı mimari: Popup da standalone bir bileşendir; aynı diyaloğu farklı rotalarda farklı girdilerle yeniden kullanabilirsiniz.

• Signal'ler: Popup'ın açık olup olmadığı ve sonucu bir signal() içinde durur; şablon, zone.js olsa da olmasa da değiştiklerinde yeniden çizilir.

• Çift yönlü veri bağlama: Popup içindeki formlar, DOM'u elle okumadan üst bileşenin durumuyla eşit kalır.

• Bağımlılık enjeksiyonu: MatDialog, NgbModal ve DialogService gibi servisler global tekil nesneler olmadan inject edilir, taklit edilir (mock) ve test edilir.

• Reaktif formlar: Yerleşik doğrulama, tipli formlar (v14'ten beri) ve asenkron doğrulayıcılar bir popup şablonuna kolayca eklenir.

• Test edilebilirlik: Angular'ın TestBed aracı ve Material'ın MatDialogHarness sınıfı diyalogları tek başına kurup kullanmanızı sağlar; odak tuzağı ve ARIA hataları yayına çıkmadan yakalanır.

Diğer framework'lerdeki karşılıkları benzer ama her birinin kendine has tuhaflıkları var. Aynı kalıbı PHP ile popup ve Vue modal popup'ları rehberlerimizde de anlattık; yaşam döngüsü kancaları framework'ler arasında epey farklı olduğu için bir framework'ten diğerine taşımak gerçek bir iş.

Dört yöntem nasıl karşılaştırılır?

Dört yöntem en çok kurulma, popup'ı açma ve sonucun geri gelme biçiminde ayrışıyor. Aşağıdaki tablo dört yöntemi aynı eksenlerde, Ekim 2026'da Angular 22 ile kontrol ederek karşılaştırıyor:

Kütüphane olmadan Angular popup'ı nasıl oluşturulur?

Bir bileşene tarayıcının yerel <dialog> öğesini koyup üzerinde showModal() çağırarak hiçbir kütüphane kullanmadan Angular popup'ı oluşturabilirsiniz. Arka plan katmanını, Esc ile kapatmayı, arka plandaki içeriğin etkisizleşmesini ve odağın geri dönmesini tarayıcı halleder; sonucu şablona bir signal taşır:

import { Component, ElementRef, signal, viewChild } from '@angular/core';

@Component({
  selector: 'app-native-popup',
  template: `
    <button type="button" (click)="open()">Open popup</button>

    <dialog #dialog aria-labelledby="native-popup-title" (close)="choice.set(dialog.returnValue)">
      <h2 id="native-popup-title">Get our Angular tips</h2>
      <p>One email a week. Press Esc or choose an option to close.</p>
      <form method="dialog">
        <button value="no">No thanks</button>
        <button value="yes">Subscribe</button>
      </form>
    </dialog>

    @if (choice()) {
      <p>You chose: {{ choice() }}</p>
    }
  `,
})
export class NativePopup {
  private readonly dialog = viewChild.required<ElementRef<HTMLDialogElement>>('dialog');
  protected readonly choice = signal('');

  open() {
    this.choice.set('');
    this.dialog().nativeElement.showModal();
  }
}

<form method="dialog">, diyaloğu kapatır ve returnValue değerini basılan butonun değerine eşitler; içeride tıklama işleyicisine gerek kalmaz. Testimizde Esc diyaloğu kapattı ve odak, ek kod olmadan Open popup butonuna döndü. MDN'nin dialog öğesi başvurusu davranışın geri kalanını listeliyor. Başka türlü bileşen kütüphanesine ihtiyaç duymayan bir uygulamada basit bir onay ya da kayıt popup'ı için doğru seçim bu.

Bir popup'ı ya da toast'ı kütüphane olmadan canlandırmak için animate.enter ve animate.leave kullanın. Angular 20.2, @angular/animations paketini bunların lehine kullanımdan kaldırdı; Angular'ın giriş ve çıkış animasyonları rehberinin anlattığı gibi bunlar, öğe eklenince bir CSS sınıfı ekler ve öğeyi kaldırmadan önce animasyonunun bitmesini bekler:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-toast',
  template: `
    <button type="button" (click)="show.set(!show())">Toggle toast</button>
    @if (show()) {
      <div class="toast" role="status" animate.enter="toast-in" animate.leave="toast-out">
        Changes saved
      </div>
    }
  `,
  styles: `
    .toast-in { animation: slide-in 200ms cubic-bezier(0.23, 1, 0.32, 1); }
    .toast-out { animation: slide-in 150ms cubic-bezier(0.23, 1, 0.32, 1) reverse; }
    @keyframes slide-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .toast-in, .toast-out { animation: none; }
    }
  `,
})
export class Toast {
  protected readonly show = signal(false);
}

role="status" toast'ı odağı taşımadan bir durum mesajı olarak işaretler; duyurunun kesin olması gerekiyorsa MatSnackBar ya da CDK'nın LiveAnnouncer servisi daha güvenli seçimdir. Reduced-motion sorgusu, daha az hareket isteyen kullanıcılar için kaydırmayı kapatır.

SaaS uygulamanız için doğru popup yöntemini nasıl seçersiniz?

Doğru yöntem üç soruya bağlı: onu kim yapıyor, popup'ın içinde ne var ve uygulamanın neresinde duruyor. Bu kısa karar akışını izleyin, fazla tahmin yürütmeden dört gruptan birine yerleşirsiniz.

1. Angular Material'ı seçin, eğer: uygulamanız zaten Material Design token'ları kullanıyorsa, tasarım sisteminiz Material tipografisine ve bileşenlerine dayanıyorsa ya da kutudan çıktığı gibi en öngörülebilir erişilebilirliği istiyorsanız. Angular ekibi geliştiriyor ve sürümleri Angular'ınkilerle aynı anda çıkıyor. Ödünleşim: temalar keskin kararlar içeriyor ve belli bir noktadan sonra onları özelleştirmek framework'le savaşmaya dönüşüyor.

2. Ng-bootstrap'ı seçin, eğer: ön yüzünüz zaten Bootstrap temalıysa, ekibiniz Bootstrap CSS sınıflarına Material'ın tema sisteminden daha alışkınsa ya da onay/iptal diyalogları için küçük bir kurulum istiyorsanız. Ödünleşim: animasyon ve tema seçenekleri Material ve PrimeNG'den daha sınırlı.

3. PrimeNG'yi seçin, eğer: diyalog dışında 90+ bileşene (veri tabloları, grafikler, takvimler) ihtiyacınız varsa, tek satırlık ayarla değiştirebileceğiniz hazır temalar istiyorsanız ya da ek bağlantı yazmadan sürüklenebilir, yeniden boyutlandırılabilir diyaloglar gerekiyorsa. Ödünleşim: tema motoru v17 ile v22 arasında değişti, bu yüzden eski rehberler çalışmıyor.

4. Popupsmart'ı seçin, eğer: popup bir pazarlama ya da açılış sayfasındaysa, popup'ı mühendis olmayan biri (pazarlama, büyüme, içerik ekibi) düzenleyecekse ya da prototip hazırlıyor ve kurulumu tamamen atlamak istiyorsanız. Ödünleşim: Angular'ın yaşam döngüsünün dışında yaşar ve servislerinizi okuyamaz.

Tipik bir SaaS ürününde pratik cevap bir ayrımdır: uygulama içi modallar (silme onayları, ayar diyalogları, ödeme akışları) için bir Angular kütüphanesi, pazarlama yüzeyi (bülten kaydı, ücretsiz deneme hatırlatmaları, çıkış niyeti) için kodsuz bir araç. Tek araçla ikisini birden yapmaya çalışmak, ekiplerin aynı işi yeniden yaptığı yerdir.

2026'da kaçınılması gereken en yaygın Angular popup hataları nelerdir?

Dört yöntemin hepsinde aynı birkaç hata canlı kodda tekrar tekrar çıkıyor. Hiçbiri büyük değil, ama her biri kullanıcı deneyimini ya da erişilebilirliği sessizce bozuyor; test ekibiniz de bunları çoğu zaman bir kullanıcı şikâyeti gelene kadar fark etmiyor.

1. Yapışkan başlıklar ve alt menülerle z-index çakışmaları. Material diyaloglarını tutan CDK overlay kapsayıcısı z-index: 1000 değerinde duruyor, Bootstrap 5.3 modalı 1055'e (arka plan 1050) koyuyor, PrimeNG'nin modal katmanı ise 1100'den başlıyor. Yapışkan menünüzün z-index değeri daha yüksekse diyalog onun arkasında açılır ve hiç açılmamış gibi görünür. Çözüm: stil dosyanızda z-index değerlerini topluca gözden geçirin ya da CDK overlay kapsayıcısının z-index değerini (.cdk-overlay-container) geçersiz kılın.

2. Dinamik içerikte bozulan odak. MatDialog açıldığında odağı ilk sekmeyle ulaşılabilir öğeye taşır (autoFocus: 'first-tabbable'). İçerik asenkron yükleniyorsa (sonradan yüklenen form alanları, asenkron veri çekme) odaklanacak bir şey henüz olmayabilir. Çözüm: diyalog kapsayıcısına odaklanmak için autoFocus: 'dialog' ayarlayın ya da yükleme durumunu odaklanabilir bir öğeyle gösterin.

3. Diyalog içindeki aboneliklerden bellek sızıntıları. Material'daki afterClosed() ve PrimeNG'deki onClose kendiliğinden tamamlanır, Ng-bootstrap'ın result değeri de bir Promise'tir; yani bunlara tek bir abonelik sızıntı yapmaz. Popup bileşeninin içinde uzun ömürlü akışlara (bir store, rota parametreleri, bir interval) açtığınız abonelikler ise sızıntı yapar. Çözüm: onları takeUntilDestroyed() üzerinden geçirin ya da signal kullanın.

4. Özel diyaloglarda ARIA rollerini atlamak. Popup'ınızı @if ve bir <div> ile kendiniz yazıyorsanız role="dialog", aria-modal="true", aria-labelledby, bir odak tuzağı ve Esc kullanımını kendiniz eklemeniz gerekir. Bunlar olmadan ekran okuyucu kullananlar diyaloğun dışına düşer. showModal() ile açılan yerel <dialog> öğesi modal durumunu, Esc'yi ve odağın geri dönmesini sizin yerinize halleder.

5. Yavaş cihazlarda takılan animasyonlar. MatDialog varsayılan olarak 150 ms'de açılır, 75 ms'de kapanır (enterAnimationDuration ve exitAnimationDuration bunu değiştirir) ve prefers-reduced-motion ayarlayan kullanıcılar için animasyonları kapatır. Hareketi animate.enter ile kendiniz yazıyorsanız aynı reduced-motion kuralını kendiniz ekleyin ve girişleri kısa tutun.

6. Standalone bileşen geçişini unutmak. Standalone bileşenler Angular 19'da varsayılan oldu; yeni Angular 22 projeleri ayrıca @if/@for kontrol akışını kullanıyor ve zone.js olmadan çalışıyor. NgModule dönemi rehberlerinden gelen kod bir modül içinde hâlâ çalışır, ama standalone bir uygulamada her bileşen şablonunun kullandığını kendisi import eder. Diyalog API'leri pek değişmedi; değişen, onları nereden import ettiğiniz. Angular iki geçişi de hazır sunuyor: ng generate @angular/core:standalone ve ng generate @angular/core:control-flow.

7. Popup'ı yalnızca masaüstüne göre boyutlandırmak. 28.674 kampanyayı kapsayan, Ocak 2024 ile Eylül 2026 arasındaki Popupsmart 2026 popup kıyaslamasına göre popup gösterimlerinin %63'ü mobilde gerçekleşiyor. 600 px'e ya da width: '70%' değerine sabitlenmiş bir diyalog telefonda pek yer bırakmaz. Material diyaloglarına bir maxWidth verin, PrimeNG'nin breakpoints seçeneğini kullanın, popup'ı 375 px'te kontrol edin ve yerleşim için mobil popup tasarım rehberimize bakın.

Angular popup'larında erişilebilirlik nasıl sağlanır?

W3C'nin 2023'te yayımladığı WCAG 2.2, Web İçeriği Erişilebilirlik Yönergeleri'nin güncel sürümüdür. Popup'larda özellikle beş şeyin doğru olması gerekir:

• ARIA öznitelikleri: role="dialog", diyalog başlığının kimliğini gösteren aria-labelledby ve aria-modal="true" kullanın. Ng-bootstrap ve PrimeNG üçünü de sizin yerinize ekler. Angular Material ise varsayılan olarak aria-modal değerini false bırakır ve sayfanın geri kalanını ekran okuyuculardan aria-hidden ile gizler; denetiminiz bu özniteliği istiyorsa diyalog ayarlarında ariaModal: true yapın. Özel popup'larda bunların hepsini elle yapmanız gerekir.

• Klavyeyle gezinme: Tab ve Shift+Tab yalnızca diyalog içindeki odaklanabilir öğeler arasında dolaşmalı. Esc diyaloğu kapatmalı. Enter (birincil butonda) onaylamalı.

• Odak yönetimi: Diyalog açıldığında odak ilk etkileşimli öğeye geçer. Kapandığında odak tetikleyici butona döner. Angular 22 test uygulamamızda Material'ın diyaloğu, Ng-bootstrap'ın modalı ve yerel <dialog> öğesi ikisini de yaptı. PrimeNG 22'nin diyalogları odağı içeri taşıdı ama kapanırken sayfanın gövdesinde bıraktı; yukarıdaki PrimeNG örneklerinin tetikleyicide focus() çağırmasının nedeni bu.

• Kolay bulunan bir kapatma kontrolü: Popupsmart'ın 2026 kıyaslamasında popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor. Kapatma butonuna görünür bir etiket ya da bir aria-label verin, insanların aradığı yere koyun ve Esc'nin çalıştığından emin olun.

• Ekran okuyucu testi: Windows'ta NVDA, macOS'ta VoiceOver ile test edin. İkisi de diyalog açıldığında başlığı ve odaklanılan öğeyi seslendirmeli.

Erişilebilirlik isteğe bağlı değil. ARIA rollerini ya da odak yönetimini atlamak klavye ve ekran okuyucu kullananları dışarıda bırakır; bu varsayımsal değil, gerçek bir maliyet. Daha ayrıntılı bir kontrol listesi gerekiyorsa W3C'nin diyaloglar için ARIA Authoring Practices rehberi başvurulacak kaynaktır.

İlk Angular popup'ınızı bu hafta yayına alın

Artık dört çalışan seçeneğiniz var: Angular Material'ın MatDialog servisi, Ng-bootstrap'ın NgbModal servisi, PrimeNG'nin p-dialog bileşeni ve Popupsmart'ın kodsuz embed kodu; kütüphane istemediğiniz durumlar için de yerel <dialog> öğesi. Yukarıdaki karar akışına göre birini seçin (Material uygulamaları için Material, Bootstrap uygulamaları için Ng-bootstrap, animasyon ağırlıklı kullanımlar için PrimeNG, mühendislik dışı işler için Popupsmart) ve kurulumu bir sonraki geliştirme oturumunuzun ilk on dakikasında yapın.

Ekibiniz hangi kütüphanede standartlaşacağını tartışırken kodsuz yoldan başlamak isterseniz app.popupsmart.com adresinden kaydolun, bir şablon seçin, embed kodunu index.html dosyasına yapıştırın; öğle yemeğinden önce Angular geliştirme sunucunuzda çalışan bir popup'ınız olur. Kodlu yöntemler, popup'ın kalmaya değer olduğunu doğrulayana kadar bekleyebilir.

Sıkça Sorulan Sorular

Angular'da popup'lar için özel animasyonlar oluşturabilir miyim?

Evet. Angular 20.2 ve sonrasında popup öğesini bir @if bloğuna koyun, üzerine animate.enter ve animate.leave ekleyin ve hareketi @keyframes içeren CSS sınıflarıyla tanımlayın. Angular, öğeyi DOM'dan kaldırmadan önce çıkış animasyonunun bitmesini bekler. Eski @angular/animations paketi hâlâ çalışıyor ama kullanımdan kaldırıldı. Animasyon kodu yazmak istemiyorsanız Popupsmart'ın stil panelinde bir açılış efekti ayarı var ve popup'lara Lottie animasyonu ekleyebiliyorsunuz.

Angular'da modal diyalog ile popup arasındaki fark nedir?

İki terim çoğu zaman eş anlamlı kullanılır, ama gerçek bir fark var. Modal diyalog sayfanın geri kalanını kilitler: onu kapatana kadar dışındaki hiçbir şeyle etkileşime giremezsiniz. Popup ise daha geniş bir kategoridir; tooltip'ler, açılır menüler, snackbar'lar ve küçük yüzen paneller gibi sayfayı kilitlemeyen kalıpları da kapsar. Angular'da MatDialog, NgbModal ve p-dialog varsayılan olarak modal çalışır. Modal olmayan bir diyalog için Material'da hasBackdrop: false, Ng-bootstrap'ta backdrop: false ayarlayın.

Angular'da bildirim veya uyarı popup'ı nasıl gösterilir?

Kısa bir bildirim için Angular Material'ın MatSnackBar servisini kullanın: inject edip open('Changes saved', 'Undo', { duration: 4000 }) çağırın. Sayfayı kilitlemez ve ekran okuyucular mesajı seslendirir. Cevap gerektiren bir uyarı için, örneğin silme onayı ya da oturum zaman aşımı, bunun yerine bir modal kullanın: MatDialog, NgbModal veya yerel dialog öğesi. Tarayıcının window.alert() fonksiyonu da çalışır ama ona stil veremezsiniz.

Angular'da popup kullanıcı etkileşimlerini nasıl takip edebilirim?

İki yol var. Kendi kurduğunuz yolda diyaloğunuzun açılma, kapanma ve form gönderme olaylarına dinleyici bağlar, bu olayları Google Analytics 4 veya Plausible gibi bir web sitesi analiz aracına gönderirsiniz. Kısa yol ise Popupsmart gibi takibi hazır gelen bir popup oluşturucu kullanmak: popup görüntülemeleri, lead'ler, etkileşimler ve dönüşüm oranı, tek satır analiz kodu yazmadan Analitik sayfasında görünür. Aynı yaklaşım her teknolojide işe yarar; Python web uygulamalarında popup rehberimizde de aynısını anlattık.

2026'da SaaS uygulamaları için en iyi Angular popup kütüphanesi hangisi?

Sıfırdan başlıyorsanız en güvenilir varsayılan Angular Material: onu Angular ekibi geliştiriyor, erişilebilirliği sağlam ve sürümleri Angular'ın sürümlerini takip ediyor. Ön yüzünüz zaten Bootstrap ise Ng-bootstrap yeniden tema giydirme zahmetini ortadan kaldırır. PrimeNG bileşen çeşitliliğinde öne çıkar. Pazarlama sayfası popup'ları için kodsuz bir araç, bu üçünden herhangi birini kurmaktan daha hızlıdır. Herkes için tek bir en iyi yok; seçim mevcut teknoloji yığınınıza bağlı.

Angular'da butona tıklayınca açılan popup form nasıl oluşturulur?

Tetikleyici butona bir tıklama işleyicisi bağlayın, diyalog servisini (MatDialog, NgbModal veya DialogService) inject edin ve reaktif form içeren bir bileşen açın. Gönderilen değeri Material'da afterClosed(), Ng-bootstrap'ta result, PrimeNG'de onClose üzerinden okuyun. Formu kısa tutun: Popupsmart'ın 2026 kıyaslamasında bir veya iki alan isteyen popup'lar %0,88 ve %0,94 dönüştürüyor, üç alanda bu oran %0,56 (medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı).

Bunlara göz atın

• React ile Popup Nasıl Oluşturulur

• Vue Modal ve Popup Nasıl Oluşturulur

• Modal Popup Nasıl Oluşturulur

• PHP ile Sitenize Popup Nasıl Eklenir