Angular 7 CDK Components

Go back to Tutorial

The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design. Think of the CDK as a blank state of well-tested functionality upon which you can develop your own bespoke components.

Stepper

CDK stepper provides a foundation upon which more concrete stepper varities can be built. A stepper is a wizard-like workflow that divides content into logical steps

Behavior captured by CdkStepper – The base CDK version of the stepper primarily manages which step is active. This includes handling keyboard interactions and exposing an API for advancing or rewinding through the workflow.

Linear stepper – A stepper marked as linear requires the user to complete previous steps before proceeding. For each step, the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step.

There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step.

Alternatively, if you don’t want to use the Angular forms, you can pass in the completed property to each of the steps which won’t allow the user to continue until it becomes true. Note that if both completed and stepControl are set, the stepControl will take precedence.

Types of steps

• Optional step – If completion of a step in linear stepper is not required, then the optional attribute can be set on CdkStep in a linear stepper.
• Editable step – By default, steps are editable, which means users can return to previously completed steps and edit their responses. editable=”false” can be set on CdkStep to change the default.
• Completed step – By default, the completed attribute of a step returns true if the step is valid (in case of linear stepper) and the user has interacted with the step. The user, however, can also override this default completed behavior by setting the completed attribute as needed.

Table

The CdkTable is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience.

The table provides a foundation upon which other features, such as sorting and pagination, can be built. Because it enforces no opinions on these matters, developers have full control over the interaction patterns associated with the table.

Tree

The <cdk-tree> enables developers to build a customized tree experience for structured data. The <cdk-tree> provides a foundation to build other features such as filtering on top of tree. For a Material Design styled tree, see <mat-tree> which builds on top of the <cdk-tree>.

There are two types of trees: flat tree and nested Tree. The DOM structures are different for these two types of trees.

• Flat tree – In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence. An instance of TreeFlattener is used to generate the flat list of items from hierarchical data. The “level” of each tree node is read through the getLevel method of the TreeControl; this level can be used to style the node such that it is indented to the appropriate level.
• Nested tree – In nested tree, children nodes are placed inside their parent node in DOM. The parent node contains a node outlet into which children are projected.

Go back to Tutorial