@angular/flex-layout
Advanced tools
@angular/flex-layout is a powerful layout library for Angular that provides a sophisticated API using Flexbox CSS and mediaQuery. It allows developers to create responsive and adaptive layouts with ease.
Responsive Layouts
This feature allows you to create responsive layouts that adapt to different screen sizes. The example shows a row layout that changes to a column layout on extra-small screens.
<div fxLayout="row" fxLayout.xs="column">
<div fxFlex>Item 1</div>
<div fxFlex>Item 2</div>
<div fxFlex>Item 3</div>
</div>Grid Layouts
This feature allows you to create grid layouts with flexible spacing and alignment. The example shows a row layout with items taking 25%, 50%, and 25% of the available space, respectively.
<div fxLayout="row" fxLayoutGap="10px">
<div fxFlex="25">Item 1</div>
<div fxFlex="50">Item 2</div>
<div fxFlex="25">Item 3</div>
</div>Alignment and Justification
This feature allows you to align and justify content within a layout. The example shows a row layout with content centered both horizontally and vertically.
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex>Centered Item</div>
</div>Show/Hide Elements
This feature allows you to conditionally show or hide elements based on screen size. The example shows text that is hidden on screens larger than small.
<div fxShow fxHide.gt-sm>
This text is hidden on screens larger than small.
</div>ngx-flexible-layout is another Angular library that provides a flexible layout system using CSS Flexbox. It offers similar functionalities to @angular/flex-layout but with a different API and potentially fewer features.
)
Angular Flex Layout provides a sophisticated layout API using FlexBox CSS + mediaQuery. This module provides Angular (v2.x and higher) developers with component layout features using a custom Layout API, mediaQuery observables,and injected DOM flexbox-2016 css stylings.
The Layout engine intelligently automates the process of applying appropriate FlexBox CSS to browser view hierarchies. This automation also addresses many of the complexities and workarounds encountered with the traditional, manual, CSS-only application of Flexbox CSS.
The real power of Flex Layout, however, is its responsive engine. The Responsive API enables developers to easily specify different layouts, sizing, visibilities for different viewport sizes and display devices.
The sources for this package are in the Flex-Layout repository.
Please file issues and pull requests against that repo.
License: MIT
The latest release of Angular Flex-Layout can be installed from npm
npm install @angular/flex-layout
Playing with the latest changes from master is also possible
npm install https://github.com/angular/flex-layout-builds.git
Directive selectors are now camelCase (instead of dash-case); as specified in the Angular Style Guide (Q4, 2016):
Except when the directive is pretending to be a component (i.e, if it had a template it would be '').
@Component properties are not
<div class="flex-container"
fxLayout="row"
fxLayout.xs="column"
fxLayoutAlign="center center"
fxLayoutAlign.xs="start">
<div class="flex-item" fxFlex="20%" fxFlex.xs="40%"> </div>
<div class="flex-item" fxFlex> </div>
<div class="flex-item" fxFlex="25px"> </div>
</div>
Developers
Demos
Templates
While other Flexbox CSS libraries are implementations of:
Angular Flex Layout - in contrast - is a pure-Typescript UI Layout engine with an implementation that:
2.0.0-beta.5 (2017-02-09)
asObservable() for rxjs operators (#133) (6e46561), closes #125ObservableMediaService opaque token. Developers now simply use the ObservableMedia class to inject the service.before
constructor( @Inject(ObserverableMediaService) media:any ) { ... }
after
constructor(private media:ObservableMedia) { ... }
ObservableMedia to inject instance of serviceMediaService::asObservable() to get instance of observable// RxJS
import 'rxjs/add/operator/map';
import {ObservableMedia} from '@angular/flex-layout';
@Component({ ... })
export class MyComponent {
constructor( media:ObservableMedia ) {
media.asObservable()
.map( (change:MediaChange) => change.mqAlias == 'md' )
.subscribe((change:MediaChange) => {
let state = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : "";
console.log( state );
});
}
}
Previously releases used FlexLayoutModule.forRoot().
This has been deprecated and will output a console.warn() if used.
-before-
@NgModule({
declarations : [...],
imports : [
CommonModule,
FlexLayoutModule.forRoot()
]
})
export class DemosResponsiveLayoutsModule { }
-after-
@NgModule({
declarations : [...],
imports : [ CommonModule, FlexLayoutModule ]
})
export class DemosResponsiveLayoutsModule { }
<a name="2.0.0-beta.4"></a>
FAQs
Angular Flex-Layout =======
The npm package @angular/flex-layout receives a total of 205,012 weekly downloads. As such, @angular/flex-layout popularity was classified as popular.
We found that @angular/flex-layout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.