How to use angular material theme color in TypeScript / JavaScript?

Question

I don't know how to get the primary theme color (Angular Material) in a e.g. component.ts.

I can use color="primary in my template.html or mat-color($primary) in a style.scss. But how do I use theme colors for styling an element inside a canvas? How do I use them inside my TypeScript-code?

Info:

"@angular/material": "^5.0.0-rc.2",
"@angular/core": "^5.0.0"

Answer 1

I used a hacky solution. It's not beautiful but working.

component.html

<div #primary class="mat-button mat-primary" style="display:none"></div>

component.ts

declare let getComputedStyle: any;

export class Component implements AfterViewInit {
    @ViewChild('primary') primary: ElementRef;

    ngAfterViewInit() {
       const primaryColor = getComputedStyle(this.primary.nativeElement).color;
    }