Getting Started with the CDK Platform Module

This guide explores the Angular CDK Platform Module, a utility that exposes details about the environment where your application operates. By leveraging this module, you can access information about the operating system, browser, rendering engine, and specific browser capabilities like scroll behavior support.

This data allows you to tailor your Angular application's behavior according to the user's environment. The CDK Platform Module provides the following platform-related details:

  • Is Android - Indicates if the operating system is Android
  • Is iOS - Indicates if the operating system is iOS
  • Is Firefox - Indicates if the browser is Firefox
  • Is Edge - Indicates if the browser is Microsoft Edge
  • Is Safari - Indicates if the browser is Safari
  • Is Blink - Indicates if the rendering engine is Blink
  • Is Webkit - Indicates if the rendering engine is WebKit
  • Is Trident - Indicates if the rendering engine is Trident
  • Supported Input Types - A collection of input field types the browser recognizes, including number, password, radio, range, reset, search, submit, tel, text, time, url, and others.
  • The browser's support for Scroll Behavior -
  • The browser's support for passive event listeners.

Installation

Using yarn:

$ yarn add @angular/cdk

Add the @angular/cdk package to your project using yarn.

Using NPM:

$ npm install @angular/cdk

Add the @angular/cdk package to your project using npm.

Usage

Start by importing the PlatformModule from @angular/cdk/platform in your application's root module, as demonstrated in this snippet:

// other imports
import { PlatformModule } from '@angular/cdk/platform';

@NgModule({
  declarations: [
    AppComponent,
    // ... components
  ],
  imports: [
    // ... other modules
    PlatformModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Important: When working with feature or shared modules, ensure that PlatformModule is imported into the module that declares the component using it.

Next, you can inject the Platform service into any component that needs platform information:

import { Platform } from '@angular/cdk/platform';
// ... other imports

@Component({
 // ... component metadata
})
export class Component  {
  constructor(private platform: Platform) {}
}

Finally, you can now query the browser platform details in the following manner:

this.platform.ANDROID; // check if OS is android
this.platform.FIREFOX // check if Browser is Firefox
this.platform.IOS; // check if OS is iOS
this.platform.BLINK; // check if render engine is Blink
this.platform.isBrowser; // check if the app is being rendered on the browser

For a complete and current API reference, please consult the official documentation here.

Example

Let's create a sharing feature for a web app. On mobile operating systems such as iOS and Android, we'll use the native sharing interface. On desktop, we'll present buttons for various social media platforms.

We'll utilize the PlatformModule to identify if the user is on iOS or Android. If they are, we'll employ the WebShare API. For other environments, like desktop, we'll fall back to a simple Twitter share button. Our component will be structured like this:

import { Platform } from '@angular/cdk/platform';

@Component({
  selector: 'app-social-share',
  templateUrl: './social-share.component.html',
  styleUrls: ['./social-share.component.scss'],
})
export class SocialShareComponent implements OnInit {
  @Input()
  shareUrl: string;

  @Input()
  title: string;

  @Input()
  text: string;

  @Input()
  hashtags: string;

  tweetShareUrl: string;

  isNativeShareSupported = false;

  constructor(private platform: Platform) {}

  ngOnInit(): void {
    // show native share if on Android and IOS and if it is supported
    this.isNativeShareSupported =
      navigator.share && (this.platform.ANDROID || this.platform.IOS);
    const baseUrl = 'https://twitter.com/intent/tweet';
    this.tweetShareUrl = `${baseUrl}?url=${this.shareUrl}&via=mwycliffe_dev&text=${this.title}&hashtags=${this.hashtags}`;
  }

  async nativeShare() {
    if (navigator.share) {
      await navigator.share({
        title: this.title,
        text: this.text.substr(0, 200),
        url: this.shareUrl,
      });
    }
  }
}

In the component above, the isNativeShareSupported property is a boolean. It is set to true only when the current browser supports the native share API and the platform is either iOS or Android. This flag is then used to toggle the UI, as shown in the template below:

<ng-container *ngIf="isNativeShareSupported; else showSocialShareButton">
  <a (click)="nativeShare()" class="space-x-2">
    <span>Share this article</span>
  </a>
</ng-container>

<ng-template #showSocialShareButton>
  Share on this article: <a target="_blank" [href]="tweetShareUrl">Twitter</a>
</ng-template>

Conclusion

We've seen how to use the CDK Platform Module to gather information about the environment your app is running in. It's a straightforward yet powerful technique for adapting your Angular application's logic based on the user's platform. This can significantly enhance the user experience by enabling advanced features for users who have access to them, while gracefully providing a basic experience for those who do not.

  • CDK Documentation on Platform Module - Link.
  • Integrate with the OS sharing UI with the Web Share API - Link.
  • Does not use passive listeners to improve scrolling performance - Link.
  • scroll-behavior - Link.
  • How to build a reusable Modal Overlay/Dialog Using Angular CDK - Link.
  • Building a Custom Stepper using Angular CDK - Link.