md-button attaches class "md-undefined" to host element when on color provided about components HOT 14 CLOSED

Maybe it should have a default;
setClassList() {return this.colour?md-${this.color}:'md-white';}

from components.

My thought is to not include the class attribute if color is undefined, but I'm not sure how to modify the "host" metadata property in the component. Still learning angular2 to see how to get the component to not render with the class attribute if color is undefined. Do you guys know how?

from components.

If returning an empty string still adds 'class' it could be an issue with Angular itself.

from components.

If both

 setClassList() {return this.color ? `md-${this.color}` : '';}

and

 setClassList() {return this.color ? `md-${this.color}` : null;}

result in

<button md-button ... class>...</button>

I'd consider this an Angular bug.

from components.

I've made a workaround for this. I'm not sure if it's good practice.

Instead binding to the class property, I'm injecting ElementRef into the constructor.
Then I let the component listen to Input() with getter and setter for color.

    color_: string;
    @Input()
    set color(value) {
        this.color_ = value;
        if (this.elementRef !== undefined) {
            this.elementRef.nativeElement.classList.add('md-' + this.color_);
        }
    }

    get color(): string {
        return this.color_;
    }

    constructor(public elementRef: ElementRef) {}

This way no class attribute is rendered on the DOM, when there's no color property provided.

What do you think?

from components.

I even noticed now that when adding an extra class to a md-button, this class is overriden without the fix.

ie:

    <button md-button class="hamburger-button"></button> 
OR
    <button md-button class="hamburger-button" color="accent"></button>

results both in
<button md-button class="md-undefined"></button>

expected:

    <button md-button class="hamburger-button"></button>

    <button md-button class="hamburger-button md-accent"></button>

from components.

AFAIK using nativeElement this way is discouraged

this.elementRef.nativeElement.classList.add('md-' + this.color_);
    }

as it prevents the code to run in webworker

from components.

If binding to class doesn't work as expected I'd use ngClass instead.

from components.

@zoechi
Can you show how? I can't get ngClass to work on 'host'.

from components.

Sorry, forgot this is about host. ngClass can't be used for this.

from components.

So, what are the other options to prevent the problems stated above?

from components.

I'd create a bug report for the behavior where class is left standing when an empty string is returned.

from components.

Thanks to @zoechi at Stack Overflow I believe we've found a solution for two issues related to this one.

1. <button md-button></button> results in <button md-button class="md-undefined"></button>
2. <button md-button color="accent" class="myCustomClass"></button> results in ```

Drop [class] on host and add following code might be a solution:

    private color_: string;

    // @see http://stackoverflow.com/questions/35506395/looking-for-nativeelement-classlist-add-alternative/35514006
    @Input()
    set color(value: string) {
        this.color_ = value;

        this.renderer.setElementClass(this.elementRef, 'md-' + this.color_, true);
    }

    get color(): string {
        return this.color_;
    }

    constructor(private elementRef: ElementRef, private renderer: Renderer) {
    }

from components.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

from components.