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.
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