Grundlegende Verwendung

Ein einfacher Seitentitel. Der title Parameter ist verpflichtend.

<app-page-header title="Einfacher Seitentitel"></app-page-header>

Mit Untertitel

Ein Seitentitel mit optionalem Untertitel für zusätzlichen Kontext.

<app-page-header 
  title="Auslagenrückerstattung"
  subtitle="Formular zur Beantragung einer Auslagenrückerstattung"
></app-page-header>

Mit Icon

Ein Seitentitel mit Icon links neben dem Text. Das Icon wird als Bildpfad übergeben.

Veranstaltungen

Verwalten Sie alle ICF Veranstaltungen

<app-page-header 
  title="Veranstaltungen"
  subtitle="Verwalten Sie alle ICF Veranstaltungen"
  icon="/img/icf-logo.svg"
></app-page-header>

Verschiedene Icons

Beispiele mit verschiedenen Icons

Finanzen

Übersicht über alle Finanztransaktionen

Mitgliederverwaltung

Verwalten Sie alle Mitglieder und deren Daten

Einstellungen

Konfigurieren Sie die Anwendung

Nur Icon, kein Untertitel

Ein Titel mit Icon, aber ohne Untertitel

Dashboard

<app-page-header 
  title="Dashboard" 
  icon="/img/icf-logo.svg"
></app-page-header>

API / Properties

Verwendung im Code

So verwenden Sie die Komponente in Ihrer TypeScript-Datei:

// component.ts
import { PageHeaderComponent } from '../page-header-component/page-header-component';

@Component({
  selector: 'app-my-component',
  standalone: true,
  imports: [PageHeaderComponent],
  templateUrl: './my-component.html',
})
export class MyComponent {}

// component.html
<app-page-header 
  title="Meine Seite"
  subtitle="Beschreibung meiner Seite"
  icon="/img/icon.svg"
></app-page-header>

Best Practices