gmodrogan gmodrogan - 5 months ago 55
AngularJS Question

Using angular component breaks material layout

Having the following in index.html and a simple ui router state that loads a compoment as template

<body ng-app="myApp" layout="column">
<div class="container" layout="row" flex ui-view>
</div>
</body>


Defined component using the following template stored in a file

<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
<md-content class="green" flex>content</md-content>


Generated code will be

<body ng-app="myApp" layout="column">
<div class="container" layout="row" flex ui-view>
<customizing>
<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
<md-content class="green" flex>content</md-content>
</customizing>
</div>
</body>


The tag breaks the angular material layouting. If I don't use a component, but just a view like this, the layout will be ok

<body ng-app="myApp" layout="column">
<div class="container" layout="row" flex ui-view>
<md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
<md-content class="green" flex>content</md-content>
</div>
</body>


Any ideas?
Also I found this post, but I can't figure out how to use the component as an attribute. Is it possible?

See plnkr sample

Answer

This works okay in Plunker

index.html

<div class="container" flex ui-view>
    <customizing layout="row" layout-fill></customizing>
</div>

If you are wondering about layout-fill, this is from the online docs:

layout-fill forces the layout element to fill its parent container

Edit:

For the Plunker in your comment below try this Plunker

customizing.html

<div layout="row" layout-fill>
    <md-sidenav md-is-locked-open="true" class="red">sidenav</md-sidenav>
    <md-content class="green" flex>content</md-content>
</div>

index.html

<div class="container" flex ui-view>
    <customizing></customizing>
</div>