Components: FR: Allow dynamically changing the ink bar color in MdTabGroup

[henrikssn]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

There should be a way to dynamically (from parent component) change the color of the md-ink-bar in the material tabs.

What is the use-case or motivation for changing an existing behavior?

We need it in our product.

Which versions of Angular, Material, OS, browsers are affected?

Angular material

[robertmesserle]

@henrikssn Can you provide more information about your specific use-case?

[henrikssn]

We have a color in the parent component which we also want to use for the ink bar. The color depends on data which we get dynamically.

[johnnysainz]

.md-tab-header md-ink-bar {
    background-color: #00b1ff;
}

[tomsdev]

Hey Johny, your example uses a constant color, this issue is about having a "dynamic" color coming from the component's inputs.

[guntram]

@johnnysainz why not use sass or less? You can put colors into variables in sass/less for example.

[PostImpatica]

You might as well get used to using the following because you'll run into issues like this constantly using material design.

ngAfterViewInit() {
let bar = document.querySelector('md-ink-bar');
this._render.setElementStyle(bar, 'backgroundColor', 'red');
}

[guntram]

If you do something like this, it would be better to change the classes!
You can do this with a wrapping element:

[ngClass]="{'first': myConditionForFirst, 'second': true, 'third': false}"

.first md-ink-bar { background-color: red; }
.second md-ink-bar { background-color: pink; }

Taken from ngDox

[PostImpatica]

@guntram I've spent hours trying to get your method working. I would rather use it but I give up.

[andrewseguin]

This can be done by using a dynamically changing class name for the tab group based on the selected tab.

Here's a rough working proof of concept that can act as your starter: http://plnkr.co/edit/m4anq3XWMOpEDAkjIJtg?p=preview

[angular-automatic-lock-bot[bot]]

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._}