a[md-button] doesn't work without button[md-button]

[szechyjs]

The following code doesn't properly render buttons.

<md-toolbar color="primary">
    <span>App</span>
    <a md-button color="primary" [routerLink]="['/summary']">Summary</a>
    <a md-button color="primary" [routerLink]="['/log']">View Log</a>
    <a md-button color="primary" [routerLink]="['/metric']">View Metric</a>
    <a md-button color="primary" [routerLink]="['/config']">View Config</a>
</md-toolbar>

If I add a button it fixes the a[md-buttons]:

<md-toolbar color="primary">
    <span>App</span>
    <a md-button color="primary" [routerLink]="['/summary']">Summary</a>
    <a md-button color="primary" [routerLink]="['/log']">View Log</a>
    <a md-button color="primary" [routerLink]="['/metric']">View Metric</a>
    <a md-button color="primary" [routerLink]="['/config']">View Config</a>
    <button md-button>FOO</button>
</md-toolbar>

Using:

• angular: 2.0.0-rc.0
• material: 2.0.0-alpha.4

[kara]

I'm having some trouble replicating this. Did you import MdAnchor into your TS and add it to your directives array? It sounds like it's missing. If not, a plunker or a TS file would be helpful.

[szechyjs]

Importing MdAnchor as a directive solved my problem.

<md-toolbar color="primary">
    <span>App</span>
    <a md-button [routerLink]="['/summary']">Summary</a>
    <a md-button [routerLink]="['/log']">View Log</a>
    <a md-button [routerLink]="['/metric']">View Metric</a>
    <a md-button [routerLink]="['/config']">View Config</a>
</md-toolbar>

I also had to remove color="primary" else the text color was the same as the background color. Is this correct?

We should probably add something to the docs about MdAnchor.

Thanks for the help!

[kara]

We haven't yet documented MdAnchor, which is pretty confusing. Thanks for bringing it up! I added an issue: #399

Re: color, using md-button gives you a flat button. The color property for a flat button controls the color of its foreground text. Since your toolbar background color is set to the primary color and the button text color is set to that same primary, it is expected that it will be the same. You'll probably want to remove the color attributes from your buttons to ensure they use the default contrast color defined by the toolbar. Hope that helps! Closing this, as it doesn't seem to be a bug.

[nadavten]

angular rc1 , material 5-2 - not working for me

[angular-automatic-lock-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.}