CODEWITHSUNDEEP
angularangular-material
Simon Legg
Simon Legg

Reputation: 939

Is it possible to add style/attibute directive to mat-card in Angular 2/4/5 Material

In Angular 2, Angular 4 and Angular 5 (more may follow with same issue).

When adding custom directive to the mat-card directive doesn't work and messes up the style of the card.

Is there a way around this?

Upvotes: 0

Views: 592

Answers (1)

Simon Legg
Simon Legg

Reputation: 939

I found a workaround for the question. 

protected _state = States.ok;

    @Input('state')
    public set state(value: string) {
        console.log('CARD STATE: ', value);
        switch (value) {
            case States.ok:
            case States.warn:
            case States.danger:
                // this.elementClass = 'app-dashboard-card-' + value;
                this.setClass(value);
                break;
            default:
                throw new Error('DashboardItemComponent: state not recognised');
        }
        this._state = value;
    }

    constructor(private renderer: Renderer2, private hostElement: ElementRef) {
        renderer.addClass(hostElement.nativeElement, 'custom-theme');
    }

    setClass(state: string) {
        this.renderer.removeClass(this.hostElement.nativeElement, OK_CLASS);
        this.renderer.removeClass(this.hostElement.nativeElement, WARN_CLASS);
        this.renderer.removeClass(this.hostElement.nativeElement, DANGER_CLASS);
        this.renderer.addClass(this.hostElement.nativeElement, 'app-dashboard-card-' + state);
    }

Upvotes: 1

Related Questions