In this article, we will learn how to build a stepper component using Angular CDK, just like the one in Angular Material. While it will function just like the Material Stepper Component, we will be using our theme so we can customize how it looks and feels.

Angular’s Component Development Kit (CDK) is a set of tools that implements common interaction patterns while being unopinionated about the UI. It is used as the building block for most angular UI frameworks like Angular Material.

For this article, we will be using Bulma CSS Framework for styling, feel free to replace this with your custom CSS styles or any CSS framework.

Installing & Setting up Angular CDK#

First, we will use ng add to install angular CDK using the default package manager.

ng add @angular/cdk
<>

You can use your favorite package manager to install @angular/cdk package – ng add in this case does not do anything.

Then, we will import CdkStepperModule from @angular/cdk/stepper in our app module.

import { CdkStepperModule } from '@angular/cdk/stepper';
// other imports here
…
@NgModule({
 declarations: [AppComponent],
 imports: [
  …
  CdkStepperModule,
  …
 ],
 providers: [],
 bootstrap: [AppComponent],
})
…
<>

#angular #cdk