CommonModule

Einführung - CommonModule

Das CommonModule ist ein grundlegendes Modul in Angular und stellt die essentiellen Direktiven und Pipes bereit, die für die meisten Angular-Anwendungen unerlässlich sind.

Das CommonModule ist ein Teil des @angular/common Pakets und enthält die am häufigsten verwendeten Direktiven und Pipes, die für die Template-Verarbeitung in Angular benötigt werden. Es stellt grundlegende Funktionalitäten wie Bedingungslogik, Iteration, Styling-Manipulationen und Datentransformationen (verschiedene Pipes) zur Verfügung.

Diese grundlegenden Werkzeuge ermöglichen es, dynamische und interaktive Benutzeroberflächen zu erstellen, ohne gängige Funktionalitäten jedes Mal neu implementieren zu müssen. Das CommonModule exportiert beispielsweise Direktiven für bedingte Anweisungen wie @if, für Schleifen wie @for und eine Vielzahl von Pipes zur Datenformatierung, die in nahezu jeder Angular-Anwendung zum Einsatz kommen. Die Existenz eines solchen zentralen Moduls ist von grundlegender Bedeutung, um Redundanz zu vermeiden und eine konsistente Basis für alle Angular-Projekte zu gewährleisten.

Die Direktiven und Pipes, die das CommonModule umfasst, ermöglichen die Manipulation des Document Object Model (DOM) in Abhängigkeit von Anwendungsdaten und Ereignissen.

Verwendung von CommonModule

Das CommonModule kann im Allgemeinen wie folgt importiert werden.

import { CommonModule } from '@angular/common';

Wann muss man CommonModule importieren?

Wenn man Direktiven wie *ngIf, *ngFor, *ngSwitch oder Pipes wie date, uppercase verwenden möchte.

Verwendung in Standalone Components (Angular 16+)

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

@Component({
    selector: 'app-user-profile',
    standalone: true,
    imports: [
        CommonModule
    ],
    template: `
        <div>
            <h2>User profile</h2>
            @if (user) {
                <span>Name: {{ user.name }}</span>
            }
            @else {
                <span>No user</span>
            }
        </div>
    `
})
export class UserProfileComponent {
    user = {
        name: 'John',
        email: 'doe@example.com'
    };
}

Verwendung in NgModule basierten Anwendungen

In älteren Angular-Anwendungen oder wenn man NgModule-Ansatz verwendet, wird das Modul in einem NgModule importiert.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UserProfileComponent } from './user-profile.component';

@NgModule({
    declarations: [
        UserProfileComponent
    ],
    imports: [
        CommonModule
    ],
    exports: [
        UserProfileComponent
    ]
})
export class UserModule {}