Imagine, based on screen size and orientation you need to change layout, font-size or a query to the backend. Angular CDK Layout API helps identify and code conditional logic.
How to Code for Portrait and Landscape Layouts in Angular
Use BreakpointObservable in Component Dev Kit (CDK)
Increasingly, users run web applications on mobile devices. They could be iPhones or Android phones, tablet devices like iPads, windows laptops with detachable screens etc. Notice, on a mobile device, it’s easy to switch between portrait and landscape modes. For you, as a developer, it includes additional complexity to adapt to a change in the layout.
This article describes a ready-made service in Angular CDK (Component Dev Kit) to identify and adapt to changes in the layout.
Getting Started
- Ensure CDK is part of your project. You can run the following command to install CDK. It uses an Angular CLI schematic.
ng add @angular/cdk- Include LayoutModule as part your Angular module. Import from @angular/cdk/layout. Use the following code snippet.
import { LayoutModule } from '@angular/cdk/layout';@NgModule({
declarations: [
AppComponent,
AdaptByScreensizeComponent
],
imports: [
LayoutModule,
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
BreakpointObserver
This service provides functions to watch for changes in the viewport size and layout. Inject it in a component. Consider the following ,
isMatched()
The function takes a single parameter, a string representing the breakpoint value. Returns true if viewport matches the breakpoint.
constructor(private bpObserable: BreakpointObserver) { }ngOnInit(): void {
let result = this.bpObserable.isMatched('(orientation: portrait)'));
}
Breakpoints
CSS uses breakpoints to identify screen size. It works on the viewport width. For example, Bootstrap library calls a screen width less than 576px an extra-small screen, between 576px and 768px a small screen, between 768px and 992px a medium screen, so on.
The following breakpoints are defined in CDK. It (Breakpoints) is a constant in the module @angular/cdk/layout that provides a list of predefined breakpoints. Consider the following.
XSmall: string;
Small: string;
Medium: string;
Large: string;
XLarge: string;
Handset: string;
Tablet: string;
Web: string;
HandsetPortrait: string;
TabletPortrait: string;
WebPortrait: string;
HandsetLandscape: string;
TabletLandscape: string;
WebLandscape: string;observe()
You should expect device orientation to change on-the-fly. User might have started using your application in landscape and switched to portrait.
Unlike isMatched() function, which checks viewport at a point-in-time, the observe() function returns an observable. The callback is executed every time user changes the orientation.
Consider the following use case. This page shows a larger image in landscape and the museum timings in portrait. Notice a message providing the instruction based on the current orientation.
Use this link to play with the demo application.
Consider the following code snippet.
- Remember bpObservable is an object of BreakpointObservable injected into the component.
- The observe() functions watch for portrait and landscape orientations.
- When the observable is invoked, the message is updated providing an instruction to the user.
ngOnInit(): void {this.bpObserable
.observe([
'(orientation: portrait)',
])
.subscribe(result => {
if(result.matches){
this.isPortrait = true;
this.message = 'Turn your device (landscape) to see a larger image';
}
});this.bpObserable
.observe([
'(orientation: landscape)',
])
.subscribe(result => {
if(result.matches){
this.isPortrait = false;
this.message = 'Turn your device (portrait) to see museum timings';
}
});
}
In conclusion, often, viewport is managed with a CSS framework like bootstrap or media queries in CSS. However, there are edge cases like the one above, which needs a new message in a new orientation. In another example, a remote service call could change between mobile and desktop devices. A small device can’t show as much data as that of a desktop. Here, a component’s TypeScript file need information about the device form-factor. In such circumstances, Angular CDK Layout services are highly useful.
References and links
Angular CDK Documentation — https://material.angular.io/cdk/layout/api
Demo App- https://kvkirthy.github.io/code-samples/
Go composable: Build apps faster like Lego
Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.
Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.
Help your team with:
