feat: implement layout similar to Angular Material

[rolandjitsu]

Feature Request

User should be able to create layouts in a similar way a user can do it in Angular Material.
There is no way to create layouts.

<md-content layout="column" flex>
    <div flex></div>
    <div flex></div>
</md-content>

Or at least an alternative would be nice to have.

[vijquick]

Hello Guys (core team)

Please let us know whether this is something that you guys will be implementing in future or not? We are planning for a re-write of our existing angular 1 app with angular 2, the one big task is tackling the responsive layout. The answer for this question will really help us to make a decision? Please kindly some one answer this.

Thanks

[pramttl]

This is a much needed feature. I tried mixing bootstrap4 css and angular2 material together just for using bootstrap4 grid layouts. However mixing the 2 css, caused some issues in the margin and padding of existing material2 elements like md-card.

[radoslavpetranov]

First and foremost - thanks for your awesome work! Angular material is amazing - I'm sure the final version of material 2 will be even more awesome!

I also wanted to ask whether there is a tentative timeline/milestone/version you plan to hit for the layout features? I think this is the most major feature that is missing for people to start redoing their temp bootstrap 3/4 layouts and to start gradually incorporating the widgets you've already created. Is layout somewhere in the near-future pipeline or are you planning to leave it for last? Are we talking a 1-2 month ballpark or is 4-6 months more likely?

With all the angular updates it's time for me (and I'm sure I'm not the only one) to update to rc6, update the router, forms and while at it I thought I might as well move to angular cli. So the cherry on the cake is definitely angular material but the lack of layout directives is a show stopper for now.

Thanks again for your work guys and if you can give us just a very general idea of your timeline/plans regarding this feature it would be hugely appreciated. Keep on rocking!

[ramirezd42]

Hey all! I loved the layout features of material 1 and would live to see them exist in some form in material 2 but I'm really not sure what form is ideal.

I've started this project to fill the gap of the missing layout functionality in Angular Material 2 https://github.com/ramirezd42/ng2-flex-layout

But the deeper I go the more I realize that all of the layout functionality appears to be available by either:

• Including this Sass file from Angular Material 1.
  This will get you same attribute-based api that existed in Angular Material 1, but according to the comments for the layout service:

  "Use of attribute selectors creates significant performance impacts in some
  browsers... mainly IE.".

• Include THIS Sass file instead and use the class names directly to define layouts.
  For example

<div class="layout-column layout-gt-sm-row">
  ...
</div>

instead of

<div layout="column" layout-gt-sm="row">
  ...
</div>

So this leaves me with the following questions:

• As far as I can tell, the only reason the layout exists as a directive at all is to preserve the ability to use an attribute-based api without incurring the costs of performance issues on some browsers. Why not just use the class-based API? There are other places in Angular Material that use classes in a similar way, for example .md-caption and .md-display-x. Is there some benefit for using attributes that I'm missing?
• Does anyone know where I can find further information on the performance issues that are mentioned? I'd like to know what the real-world trade-offs would be for just using the attribute-selectors directly, but I can't seem to find any mention of this in my googlings.

[aminebizid]

I use layouts of ng2 material

https://github.com/justindujardin/ng2-material

[ramirezd42]

@Zigzag95
That project seems to be taking the first approach I mentioned which is yanking the layout-attributes.scss file from material 1.

This is definitely the approach that makes the most sense to me, I'm just be wary of what exactly the

"Use of attribute selectors creates significant performance impacts in some
browsers... mainly IE.".

comment entails.

[dreambo8563]

it will be great to mark this feature with a high priority, then we can start some work even we didn't have all the components of material

[ghost]

Yeah, I second this, a temporary implementation would be great while waiting for the other elements.

[radoslavpetranov]

Erm to be honest I'm not sure if a temporary implementation would be a great idea. I think putting this feature toward the front end of the pipeline (if possible) would be a better choice. Otherwise we'll end up with some significant changes a-la-angular2-RC.5 that will be a pain in the neck to move to.

IMO, if this feature cannot be prioritized higher we should just patiently wait for the final design and the corresponding implementation. Otherwise people will end up spending time on something that will end up being ditched instead of developing useful new features.

[ghost]

Yeah, you're totally right.

Temporary was a poor choice of word.
What I meant was, some basic stuff, that are very unlikely to change.
For example a directive for media queries so we can for example modify the rows property of the grid-list directly inside a component.
Or something like a flexContainer & flexChild property on every material element for example.

But to be honest I have absolutely no idea how the responsive/adaptive layout is implemented in ng1 because I was using bootstrap/boostrap material/arrivejs to achieve material design with ng1 so this directive idea might be at the very opposite of their vision.

From what I remember, Jeremy said that they hope to be in beta by the end of the year at ngConnect, and I really hope that beta means that we may see the layout be then.

[no-more]

It would be great to have a css only version like in angular1, this could be faster to implement, less cpu consuming. The directives could be added later when all css classes are validated.

I personally have imported some layout css from angular1 and it's working fine till now.

[viztastic]

Given that everyone else here is on the same page, I feel like I'm flogging the proverbial horse...

BUT, is there anything the opensource community (us) can help with to prioritise this capability? I understand why the material team have started off with components, but in many ways I'd rather start with a layout system and then gradually take on board new material components as they become available, rather than have no layout system and a bunch of components.

@jelbourn

[maxime1992]

I also hope we have a layout available soon.
But material team was probably under heavy work due to this project but also with the multiple conferences.
I've seen this morning a tweet saying that there are 3 new members joining angular material2 team :) ! Tina, Miles and Andrew (congrats to you 3 BTW !). So I don't know exactly what's the roadmap of ng material2 but it's in good hand :)

[jelbourn]

Status on this: we're still thinking about the best way to approach layouts for material2. In the wider land of web design, CSS Grid is on the horizon and there are several relatively popular systems in the wild (e.g., Susy, Fukol, or even the humble Bootstrap grid).

There's no reason that the components need to be coupled to an application layout system; they should be compatible with whatever layout developers may want to use in their apps. As such, layout may end up being completely decoupled from material.

That said, we know a lot of folks really liked the layout system in material1. Porting that over to Angular 2 isn't completely straightforward, since the Angular 1 version dynamically created all of the layout directives at run time- something that's a no-go in Angular 2. Trying to offer the same thing exactly would result in a very large number of directives / inputs. Because of this, we're still figuring out if there are generally useful changes that could be made to Angular core to support something like this and, if not, other ways to approach it.

[JimLynchCodes]

I understand @jelbourn's point, but I am also an Angular 2 developer who is familiar with Material 1 flexbox layouts and is now lost trying figure out how to make my site responsive.

[ramirezd42]

To @JimTheMan and anyone else struggling to proceed without this feature I suggest taking a look at my earlier comments. You can simply include the sass files from Material 1 into your project to get the same layout functionality that exists in Material 1.

Either way I suggest reading through those files anyway since the abstraction they provide is surprisingly thin and you might even be better served by learning more about flexbox and media-queries and rolling your own version.

One thing that's still not quite clear to me is what is gained through the Javascript implementation that material 1 provides of the Sass files I mentioned above. Is it simply to avoid performance issues with attribute selectors in some browsers? If so, are those even still a concern?

[eXaminator]

If you target IE (even 10 and 11) it very much still is a concern (especially with a large DOM). We had that problem in our last project. The switch to classes was a huge improvement.

[mbeckenbach]

@jelbourn @eXaminator
We experienced the same and feel quite compfortable with the css classes only. Wouldn't it be possible to create something similar in ng2. A pure css solution.

[RaulRG]

Ummmmm... I can understand what @jelbourn said about layout being decoupled from the component library. I didn't know http://susy.oddbird.net/, but it looks great. That said, it would be nice to have a kind of "default" layout system from the material library. This is the great advantage of such a library in the first place: to get some guidance. For me it would be ok if you decided to use for example Susy as your "default" layout system and added some samples using it.

[RaulRG]

I read the Material Design Guidelines and there it says:

Material design’s responsive UI is based on a 12-column grid layout. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system.

Source: https://material.google.com/layout/responsive-ui.html#responsive-ui-grid

I do think that Angular Material should include a layout system.

[ThomasBurleson]

@jelbourn - Perhaps this should be closed; since angular/flex-layout is not in Beta.0 ?

[jelbourn]

@ThomasBurleson beat me to it.

Everyone see the Angular blog for our announcement of @angular/flex-layout, which covers the layout features previously captured in Material 1.

[ladyleet]

@jelbourn oh yeah! that announcement just when i'm looking for the solution! congrats team on launching this! 👍

[gedclack]

@jelbourn thank you for implementing it 😄 bravo angular team!

[talentedandrew]

I'm confused, should I wait for Angular Material 2's Layout or start using angular/flex-layout? Someone please clarify?

[cgatian]

Use @angular/flex-layout

…

On Fri, Jun 16, 2017, 6:49 AM talentedandrew ***@***.***> wrote: I'm confused, should I wait for Angular Material 2's Layout or start using angular/flex-layout? Someone please clarify? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#946 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABq8ahIBIboF1Vyt3zkFkmVkA8Uygxkvks5sEl20gaJpZM4Jcjwe> .

[talentedandrew]

@cgatian thanks for the response. I hope both are compatible with each other and angular V4.

[mariohmol]

the only issue is that is not supported by SSR yet.. any suggestions for other frameworks that should work the grid system with angular 2 material? thanks!

[hantsy]

The syntax of @angular/flex-layout is very different from Angular Material 1.x, try Covalent UI from Teradata, which provides flex directives exactly same as Angular Material 1.x, which maybe decrease some of your learning curve.

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