Angular TagCloudModule

Angular TagCloudModule

Auf vielen Webseiten findet man sie: Schlagwortwolken (engl. Tag Clouds). Diese Tag Clouds beinhalten oft Links zu Seiten die von Nutzern oft aufgerufen werden, interessante Schlagword, Tags, oder ähnliches.

In diesem Artikel möchte ich das TagCloudModule für Angular vorstellen. Das Modul lässt sich in nur wenigen Schritten in eine Angular-Anwendung (ab Version 2.x) integrieren und generiert eine Schlagwortwolke anhand eines übergebenen Daten-Arrays. Durch die Gewichtung im Daten-Array können Begriffe entsprechend größer oder kleiner dargestellt werden. Weiterhin lassen sich verschiedene Optionale Parameter mit übergeben, die den Style der Schlagwortwolke anpassen und auf Events reagieren.

Das Modul Installieren und in die Anwendung integrieren

Um das TagCloudModule verwenden zu können, installieren wir dieses zunächst über NPM mit dem folgenden Befehl:

npm install --save angular-tag-cloud-module

Anschließend müssen wir das Modul noch in der Angular-Anwendung bekannt machen:

// app.module.ts 
import { TagCloudModule } from 'angular-tag-cloud-module';
 
@NgModule({
  imports: [
    TagCloudModule
  ]
})
export class AppModule { }

Festlegen der Daten und Optionen

Wir haben das Modul in unserer Angular-Anwendung bekannt gemacht. Anschließend bearbeiten wir die Komponente in der wir dieses Modul verwenden wollen. Wir laden uns zunächst das Interfaces CloudOptions aus dem Modul angular-tag-cloud-module. Anschließend definieren wir das Attribut options welches dem CloudOptions-Interface entsprechen soll. Wir legen hier zunächst eine feste Höhe und Breite für die Schlagwortwolke fest. Die Angabe overflow: false verhindert, dass Worte die nicht in den Sichtbereich der Wolke passen (definiert durch Breite und Höhe) ausgeblendet werden.

import { CloudOptions } from 'angular-tag-cloud-module';
// ...
export class MyComponent {
  options: CloudOptions = {
    width : 1000,
    height : 400,
    overflow: false
  }
}

Nun wenden wir uns den Daten zu, die wir in der Schlagwortwolke anzeigen wollen. Dafür wird ebenfalls ein Interface bereitgestellt – das CloudData-Interface.
Dieses Interface definiert einen einzelnen Datensatz, also ein einzelnes Wort für die Schlagwortwolke. Da diese aber eine Vielzahl von Worten entgegen nimmt, typisieren wir das Property data mit Array.
Jedes Element des Arrays muss mindestens das Attribut text besitzen. Über die Angabe weight definieren wir die Gewichtung der einzelnen Elemente. Der Bereich ist hierbei nicht eingeschränkt und relativ zu den jeweils anderen Elementen des Arrays. Lassen wir eine Angabe weg, so wird eine automatische Gewichtung anhand des Mittelwertes vorgenommen. Standardmäßig werden alle Tags in einem Blauton dargestellt. Das Standardverhalten lässt sich zum einen durch ein hinterlegtes Stylesheet ändern (mehr dazu später), zum anderen kann über die Angabe color einzelnen Elementen eine explizite Farbe zugewiesen werden. Hier sind alle Werte valide die auch in einem CSS Styelesheet angegeben werden können (also zum Beispiel #ff0000 oder red).

import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
// ...
export class MyComponent {
  // ...

  data: Array<CloudData> = [
    {
      text: 'Mein Text mit sehr hohem Gewicht',
      weight: 10,
      color: '#ffaaee'
    },
    {
      text: 'Mein Text mit mittlerem Gewicht',
      weight: 5,
    },
    // ggf. weitere Elemente...
  ]
}

Einbinden des Moduls im Template

Nachdem wir nun alle notwenigen Angaben für die Übergabe der Tag Cloud definiert haben, können wir uns dem Template zuwenden. In diesem binden wir die Komponente wie folgt ein:

<angular-tag-cloud
  [data]="data"
  [width]="options.width"
  [height]="options.height"
  [overflow]="options.overflow">
</angular-tag-cloud>

Geschafft! Anschließend sollte ein ähnliches Ergebnis wie das folgende zu sehen sein:

Weitere Optionen und Möglichkeiten

Einfügen von Links

In vielen Fällen wollen wir die Elemente der Tag-Cloud als Links mit einem Ziel darstellen. Dafür geben wir das zusätzliches Attribut link in einem der CloudData-Elemente mit an. Mit der weiteren Angabe external: true erwirken wir, dass der Link beim Anklicken in einem neuen Browsertab geöffnet wird.

data: Array<CloudData> = [
  {
    text: 'Ein interner Link mit explizit festgelegter Farbe',
    link: 'https://google.com',
    color: '#ffaaee'
  },
  {
    text: 'Ein externer Link',
    external: true,
    link: 'https://google.com'
  }
]

Reagieren auf angeklickte Elemente

In manchen fällen möchten wir, dass nach dem Anklicken eines Elements eine Aktion von unserer App durchgeführt wird. Zum Beispiel könnten wir ein Popup-Fenster einblenden. Zu diesem Zweck wird von der Komponente beim Anklicken eines Elementes ein Event emittiert auf das wir reagieren können. Dafür geben wir im Template die Methode an, von der das Event verarbeitet werden soll:

<angular-tag-cloud 
  [data]="data" 
  (clicked)="popup($event)">
</angular-tag-cloud>

Das Event gibt jeweils das gesamte CloudData-Objekt zurück, welches ausgewählt wurde. In unserer Verarbeitungsmethode popup können wir somit beispielsweise die Auswahl in einem Popup-Fenster reflektieren:

export class MyComponent {
  // ...
 
  popup(el: CloudData){
    alert(`Sie haben das Element ${el.text} ausgewählt`);
  } 
}

Flexible Breite

Oft sind die Breiten der Tag Cloud abhängig von den übergeordneten Containern. Wenn wir in solch einem Fall keine Feste Breite für die Tag Cloud angeben wollen, so verwenden wir Einen Wert der kleiner oder gleich 1 ist aber größer 0. In diesem Fall bezieht sich der Wert auf die Relation zum übergeordneten Element. Geben wir Beispielsweise einen Wert von 0.8 an, so nimmt die Komponente 80% des Raumes ein, der ihr durch dem übergeordneten Element zur Verfügung gestellt wird. Im nachfolgenden Beispiel würde die Tag Cloud also eine Breite von 800 Pixel haben.

<div style="width: 1000px">
  <angular-tag-cloud
    [data]="data"
    [width]="0.8"
    [height]="300">
  </angular-tag-cloud>
</div>

Verwendung eines angepassten Stylesheets

Um den gesamten Style der TagCloud anzupassen müssen verschiedene Styles für die einzeln gewichteten Elemente überschreiben. Ein Beispiel zur Anpassung kann in dem folgenden Wiki-Artikel eingesehen werden: https://github.com/d-koppenhagen/angular-tag-cloud-module/wiki/Custom-CSS-Style

Weitere Informationen

Die vollständige Dokumentation zum Modul kann unter dem folgenden Link abgerufen werden: https://www.npmjs.com/package/angular-tag-cloud-module

Viel Spaß beim ausprobieren.

Teilen

Über den Autor

Danny Koppenhagen

Danny Koppenhagen administrator

Softwareentwickler und IT-Berater.

Kommentare