Als Entwickler:in stehst du oft vor der Herausforderung, interaktive Elemente in deine Angular-Anwendung einzubauen. Ein häufig genutztes Feature sind Popups. In diesem Artikel zeigen wir dir, wie du ganz einfach ein Angular Popup implementieren kannst – sowohl von Grund auf als auch mithilfe beliebter Bibliotheken.
Angular Popups: Wofür werden sie genutzt?
Wenn du schon mal eine komplexe Webanwendung entwickelt hast, kennst du das Problem: Du willst deinen Nutzer:innen zusätzliche Infos geben, ohne sie von der Hauptseite wegzuführen. Hier kommen Angular Popups ins Spiel.
Stell dir vor, du bist dabei, einen wichtigen Datensatz zu löschen. Plötzlich erscheint ein Popup: „Willst du diesen Eintrag wirklich unwiderruflich löschen?“ Das ist ein Angular Popup in Aktion. Es schützt vor versehentlichen Aktionen, ohne den Arbeitsfluss zu unterbrechen. Praktisch, oder?
Popups sind wie digitale Kellner – sie servieren Informationen genau dann, wenn du sie brauchst. Ob Bestätigungen, Formulare oder wichtige Hinweise – alles landet direkt vor deiner Nase, ohne dass du die Seite verlassen musst.
Aber Vorsicht: Wie bei einem guten Espresso kommt es auf die richtige Dosis an. Zu viele Popups nerven, zu wenige und wichtige Infos gehen unter. In den nächsten Abschnitten zeigen wir dir, wie du Angular Popups so einsetzt, dass deine Nutzer:innen sie lieben werden. Versprochen!
Eigenes Angular Popup mit Signals implementieren
Signals sind eine neue Funktion in Angular, die die reaktive Programmierung vereinfachen. Lass uns Schritt für Schritt ein einfaches Angular Popup mit Signals erstellen.
Schritt 1: Komponente erstellen
Zuerst erstellst du eine neue Komponente für dein Popup:
ng generate component popupSchritt 2: Popup-Komponente implementieren
In deiner popup.component.ts Datei:
import { Component, Input, Output, EventEmitter, signal } from '@angular/core';
@Component({
selector: 'app-popup',
standalone: true,
template: `
@if (isOpen()) {
<div class="popup">
<div class="popup-content">
<h2>{{ title() }}</h2>
<p>{{ message() }}</p>
<button (click)="close()">Schließen</button>
</div>
</div>
}
`,
styles: [
`
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.popup-content {
background-color: white;
padding: 20px;
border-radius: 5px;
}
`,
],
})
export class PopupComponent {
isOpen = signal(false);
title = signal('');
message = signal('');
@Output() closed = new EventEmitter<void>();
open(title: string, message: string) {
this.title.set(title);
this.message.set(message);
this.isOpen.set(true);
}
close() {
this.isOpen.set(false);
this.closed.emit();
}
}
Schritt 3: Angular Popup in der App verwenden
In deiner app.component.ts:
import { Component, ViewChild } from '@angular/core';
import { PopupComponent } from './popup/popup.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [PopupComponent],
template: `
<button (click)="openPopup()">Popup öffnen</button>
<app-popup (closed)="onPopupClosed()"></app-popup>
`
})
export class AppComponent {
@ViewChild(PopupComponent) popup!: PopupComponent;
openPopup() {
this.popup.open('Willkommen', 'Dies ist ein einfaches Angular Popup!');
}
onPopupClosed() {
console.log('Popup wurde geschlossen');
}
}Mit dieser Implementierung hast du ein grundlegendes, aber funktionales Angular Popup erstellt. Du kannst es leicht an deine spezifischen Bedürfnisse anpassen.
Bitte beachte, dass dies keine vollumfängliche Popup-Implementierung für Production-Apps darstellt. Diese Implementierung lässt viele wichtige Faktoren, wie bspw. Tastaturnavigation, das Schließen durch Klicken auf den Backdrop, uvm. außen vor. Stattdessen solltest du lieber auf etablierte Bibliotheken für deine Popups in Angular setzen.
Angular Popup mit beliebten Bibliotheken
Während eine eigene Implementierung flexibel ist, bieten viele Bibliotheken vorgefertigte Lösungen, die Zeit sparen und zusätzliche Funktionen mitbringen.
PrimeNG Popup
PrimeNG ist eine umfangreiche UI-Komponentenbibliothek für Angular. Hier ist ein Beispiel, wie du ein Angular Popup mit PrimeNG erstellst:
- Installiere PrimeNG:
npm install primeng- Füge die Standard-Styles von PrimeNG in deiner
styles.scsshinzu:
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";- Importiere das den AnimationAsync-Provider in der
app.config.ts:
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimationsAsync(),
],
};- Verwende die Dialog-Komponente in der
app.component.ts:
import { Component } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { DialogModule } from 'primeng/dialog';
@Component({
selector: 'app-root',
template: ` <p-button (onClick)="showDialog()" label="Popup öffnen" />
<p-dialog
header="Mein Angular Popup"
[modal]="true"
[(visible)]="visible"
[style]="{ width: '25rem' }"
>
<p class="m-0">Hier ist der Inhalt deines Angular Popups!</p>
</p-dialog>`,
standalone: true,
imports: [DialogModule, ButtonModule],
})
export class AppComponent {
visible: boolean = false;
showDialog() {
this.visible = true;
}
}Angular Material Dialog
Angular Material bietet eine robuste Dialog-Komponente für Angular Popups:
- Installiere Angular Material:
ng add @angular/material- Erstelle eine Dialog-Komponente und verwende sie:
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {
MatDialog,
MatDialogContent,
MatDialogRef,
} from '@angular/material/dialog';
@Component({
selector: 'app-root',
template: `<button mat-raised-button (click)="openDialog()">
Popup öffnen
</button>`,
standalone: true,
imports: [MatButtonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
readonly dialog = inject(MatDialog);
openDialog(): void {
this.dialog.open(MaterialPopupComponent, {
width: '250px',
});
}
}
@Component({
selector: 'app-material-popup',
template: `<mat-dialog-content> Mein Material Popup </mat-dialog-content>`,
standalone: true,
imports: [MatDialogContent],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MaterialPopupComponent {
readonly dialogRef = inject(MatDialogRef<MaterialPopupComponent>);
}
Fazit: Die Vielseitigkeit von Angular Popups
Wie du siehst, gibt es viele Möglichkeiten, Angular Popups in deine Anwendung zu integrieren. Ob du dich für eine eigene Implementierung mit Signals entscheidest oder auf bewährte Bibliotheken wie PrimeNG oder Angular Material zurückgreifst – jeder Ansatz hat seine Vorteile.
Unabhängig von deiner Entscheidung: Mit den hier gezeigten Methoden kannst du eindrucksvolle und funktionale Angular Popups erstellen, die die Benutzerfreundlichkeit deiner Anwendung erheblich verbessern.
Experimentiere mit den verschiedenen Ansätzen und finde heraus, welche Lösung am besten zu deinem Projekt passt. Mit der richtigen Implementierung werden deine Angular Popups nicht nur funktional, sondern auch deine UX verbessern.
Du benötigst Hilfe bei der Umsetzung deiner Angular App? Wir haben mehr als 12 Jahre Erfahrung in der Entwicklung von Frontends und sind deine Angular Agentur. Kontaktiere uns noch heute und wir finden gemeinsam heraus, wie wir das beste aus deinem Angular Frontend herausholen können!