Custom CSS Style

You can adjust the css style of the tag cloud. Just add a (new) CSS file and add it to your parents-containers metadata:

@Component({
  selector: 'my-component',
  styleUrls: ['my.component.css']
})

The file my.component.css could look like that:

/* General Layout */
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');

angular-tag-cloud /deep/ {
  font-family: 'Amatic SC';
  font-size: 12px;
  background: #2C2C2C url("../assets/blackboard.jpg") no-repeat;
  background-size: 100% auto;
}

/* no decoration for links */
angular-tag-cloud /deep/ span > a {
  text-decoration: none;
}

/* font sizes */
angular-tag-cloud /deep/ span.w10 { font-size: 550%; }
angular-tag-cloud /deep/ span.w9  { font-size: 500%; }
angular-tag-cloud /deep/ span.w8  { font-size: 450%; }
angular-tag-cloud /deep/ span.w7  { font-size: 400%; }
angular-tag-cloud /deep/ span.w6  { font-size: 350%; }
angular-tag-cloud /deep/ span.w5  { font-size: 300%; }
angular-tag-cloud /deep/ span.w4  { font-size: 250%; }
angular-tag-cloud /deep/ span.w3  { font-size: 200%; }
angular-tag-cloud /deep/ span.w2  { font-size: 150%; }
angular-tag-cloud /deep/ span.w1  { font-size: 100%; }

/* colors */
angular-tag-cloud /deep/ a        { color: inherit; }
angular-tag-cloud /deep/ a:hover  { color: rgb(255, 255, 255); }
angular-tag-cloud /deep/ span.w10 { color: #0cf; }
angular-tag-cloud /deep/ span.w9  { color: #fff; }
angular-tag-cloud /deep/ span.w8  { color: rgb(255, 0, 195); }
angular-tag-cloud /deep/ span.w7  { color: rgb(36, 154, 116); }
angular-tag-cloud /deep/ span.w6  { color: #e8f090; }
angular-tag-cloud /deep/ span.w5  { color: #c3dd90; }
angular-tag-cloud /deep/ span.w4  { color: #f09090; }
angular-tag-cloud /deep/ span.w3  { color: #f2ea10; }
angular-tag-cloud /deep/ span.w2  { color: #ee99e7; }
angular-tag-cloud /deep/ span.w1  { color: #18cb42; }