Angular Material

Angular gehört zu den verbreitetsten Frontend Frameworks auf dem Markt. Angular bietet die Option ihre Layout-Library „Angular Material“ zu verwenden.

Angular Material steht unter MIT-Lizenz und adaptiert die Standards des Material Designs für Angular. Dabei erscheint eine Nutzeroberfläche im Stil des Material Designs.

Angular Material bietet viele vordefinierte UI Elemente wie beispielsweise: Datepicker, Tabellen, Cards, Menüs, Slider, uvm.

Änderungen mit Version 7

Arbeitet man an einem Projekt mit einer Älteren Angular Material Version und updated dies auf Version 7, könnte sich das Aussehen des UI ein wenig ändern.

Material Design hat 2018 ein großes Update bekommen. Einige dieser Änderungen hatten auch Auswirkungen auf Angular Material.

Hierbei handelt es sich hauptsächlich um optische Änderungen, wie Farbanpassungen, Änderungen von Schriftgrößen oder Rundungen an den Ecken von Komponenten.

Quelle: https://github.com/angular/material2/pull/12634

Quelle: https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

Neue Features mit Version 7

Das Angular Material und das CDK-Paket erhalten durch das Update einige neue Features.

Benutzer, die auf Version 7 updaten, könnten das Virtual Scrolling und die Drag-and-Drop-Funktionalität verwenden.

Um das Virtual Scrolling oder die Drag-and-Drop-Funktionalität zu nutzen, müssen die Module ScrollingModule und/oder das DragDropModule eingebunden werden.

Virtual Scrolling

Beim Virtual Scrolling werden Elemente einer Liste nur dann gerendert, wenn diese sich im sichtbaren Bereich befinden. Dies soll dem Nutzer lange Ladezeiten ersparen.

Möchte man eine Druck-Funktionalität in seinem Projekt anbieten, ist hier etwas zu beachten. Standardmäßig werden nur die aktuell gerenderten bzw. zu sehenden Elemente gedruckt. Möchte man jedoch die ganze Liste drucken ist hier ein Workaround nötig.

Quelle: https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

Im Template einer Komponente wird dazu der VirtualScrollViewport verwendet.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Innerhalb des ScrollViewport kann über eine Liste iteriert werden. Die Direktive *cdkVirtualFor verwendet gleiche Syntax wie die *ngFor-Direktive.

Drag and Drop

Durch das Update auf Version 7 wird mit dem DragDropModule eine Möglichkeit erschaffen, Drag-and-Drop in einer Anwendung zu realisieren.

Sobald einzelne Einträge verschoben werden, wird der Inhalt automatisch neu gerendert.

Dabei ist es möglich Listen neu zu sortieren (moveItemInArray) oder auch Elemente zwischen Liste zu transferieren (transferArrayItem).

Quelle: https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c

Im Template wird das ganze folgendermaßen integriert.

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>

Im Typescript der Komponente muss dazu noch folgende Methode implementiert werden.

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}

Das Framework Angular Material wird stets weiterentwickelt und wird auch in Zukunft neue Features bieten.

Quellen

https://github.com/angular/material2/pull/12634

https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c