Menu
Given the bootstrap layout definition
ng-class="{'col-sm-6':vm.data.mode === 'ADD', 'col-sm-3': vm.data.mode === 'EDIT'}"
What's the angular material equivalent? (To set flex="50" if vm.data.mode === 'ADD' and set flex="25" if vm.data.mode === 'EDIT')
570
Angular Flex-Layout is a stand-alone library developed by the Angular team for designing sophisticated layouts. When creating an HTML page in Angular, using Angular Flex-Layout allows us to easily create FlexBox-based page layouts with a set of directives available for use in your templates.
Angular Material's Layout features provide sugar to enable developers to more easily create modern, responsive layouts on top of CSS3 flexbox. The layout API consists of a set of Angular directives that can be applied to any of your application's HTML content.
From your project folder, run the following command to install Flex Layout: npm install @angular/flex-layout @10.0. 0-beta.
fxLayout defines the flow of children elements along the main-axis or cross-axis, inside the flex container. Depending upon our layout we can pass four different values to the fxLayout attribute row,column, row-reverse and column-reverse. In addition to the fxLayout accepts other parameters like wrap and inline.
You can try below.
<div layout="row" layout-wrap>
<div flex-gt-sm="{{vm.data.mode === 'ADD' ? 50: 25}}"></div>
<div flex-gt-sm="{{vm.data.mode === 'ADD' ? 50: 25}}"></div>
<div flex-gt-sm="{{vm.data.mode === 'ADD' ? 50: 25}}"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
