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 */
angular-tag-cloud {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 10px;
}

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

/* colors */
angular-tag-cloud > a { color: inherit; }
angular-tag-cloud > a:hover { color: #0df; }
angular-tag-cloud > span.w10 { color: #0cf; }
angular-tag-cloud > span.w9 { color: #0cf; }
angular-tag-cloud > span.w8 { color: #0cf; }
angular-tag-cloud > span.w7 { color: #39d; }
angular-tag-cloud > span.w6 { color: #90c5f0; }
angular-tag-cloud > span.w5 { color: #90a0dd; }
angular-tag-cloud > span.w4 { color: #90c5f0; }
angular-tag-cloud > span.w3 { color: #a0ddff; }
angular-tag-cloud > span.w2 { color: #99ccee; }
angular-tag-cloud > span.w1 { color: #aab5f0; }