Angular Material, Responsive Web Design und Accessibility

Ziele

• Du weisst, das es Material in Angular gibt und wie du es verwendest.

Was ist Material

Material Design ist eine Designsprache, die für das neue Betriebssystem von Google Android entwickelt wurde, das im Sommer 2014 angekündigt wurde. Obwohl sich die Material Design hauptsächlich auf das Touch-Based-Design mobiler Apps konzentriert, ist es möglich, dieselben Ideen in das Webdesign zu übertragen.

Material in Angular

Für Angular gibt es eine spezifische Version von Material Design.

Auf der offiziellen Website von Angular Material sehen wir welche Components uns zur Verfügung gestellt werden.

Wenn wir zum Beispiel den “Slider” in unsere Applikation implementieren möchten, gibt es einige Schritte, welche wir beachten müssen. Jeder Component wird auf der Website wie folgt beschrieben:

• Overview: Auf der Übersicht wird beschrieben, wie und wozu man den Component anwenden kann. Oftmals werden hier auch erweiterte Funktionen eines Components aufgelistet. Daher gilt: Immer aufmerksam durchlesen!
• API: In diesem Abschnitt ist für uns vor allem der Import wichtig. Für jeden Component muss erst das dazugehörige Modul importiert werden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { MatSliderModule } from '@angular/material/slider';
...
@NgModule({
    imports: [
        // ..
        MatSliderModule,
        // ..
    ],
    // ..
})

• Examples: Hier werden Anwendungsbeispiele aufgezeigt, von welchen wir unseren Code ableiten können.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<mat-slider
  class="example-margin"
  [disabled]="disabled"
  [invert]="invert"
  [max]="max"
  [min]="min"
  [step]="step"
  [thumbLabel]="thumbLabel"
  [tickInterval]="getSliderTickInterval()"
  [(ngModel)]="value"
  [vertical]="vertical"
  aria-labelledby="example-name-label"
>
</mat-slider>

Wie Ihr Material in Eurer Angular-Applikation installiert, wird auf der offiziellen Website ausführlich beschrieben.

Material Theming

Material Design unterstützt Theming. Ein Theme ist eine Farbpalette, welche für jeden Angular Material Component angewendet wird.

Ein Theme besteht aus:

• Primärfarbe
• Akzentfarbe
• Warnung
• Vordergrund
• Hintergrund

Es gibt verschiedene pre-built Themes in Material Design, sodass man sich das Erstellen eines Themes von Hand ersparen kann:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

Um ein solches Theme zu verwenden, müssen wir dies in unserem globalen Stylesheet importieren:

1

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Natürlich kann man auch sein eigene Theme für Angular Material erstellen. Wie ihr dies machen könnt, wird hier ausführlich beschrieben (Für diejenigen, die mit den Übungen frühzeitig fertig sind).