Components: material-buttons does not have default space between them in v6.0 as they have in v5.0

[sandeeppatidar30]

Bug

What is the expected behavior?

It should have space between them as they have in v5.0

What is the current behavior?

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

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

Is there anything else we should know?

[pfeigl]

This has nothing to do with the buttons of angular material. The difference is, that Angular 6 changed preserveWhitespaces to false in the default.

This changes your generated HTML from something like this <button></button> <button></button> to <button></button><button></button> (observe the missing whitespace here)

For details read the Angular changelog found here: https://github.com/angular/angular/blob/master/CHANGELOG.md, specifically this point:

• core: set preserveWhitespaces to false by default (#22046) (f1a0632), closes #22027

[Spawnrad]

Yes it looks like we need to add :
@Component({preserveWhitespaces: true}) to have the space between buttons now.

https://stackblitz.com/edit/angular-material2-issue-urtyjg

[josephperrott]

Closing as this is likely the result of preserveWhitespaces

[tonysamperi]

The problem for me is that I also created a css rule to add margin.
Of course it gets overridden by default material styling (yes, my rules are loaded after the material theme, but still).
I had to wrap all buttons in divs. Horrible.

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