VMWare Clarity Design System and Angular 9 Ivy strict template type checking

Question

My project uses Angular (v9) and Clarity Design System (v3).

With Ivy and the strict type checking of templates, how do you handle the clrLayout of clrForm elements?

<form clrForm clrLayout="horizontal" clrLabelSize="4">
  [...]
</form>

This form gives me the following error messages:

• Type 'string' is not assignable to type 'number'. for the attribute clrLabelSize="4".
• Type '"horizontal"' is not assignable to type 'Layouts'. for clrLayout="horizontal".

Thank you!

Ref: https://clarity.design/documentation/forms

Answer 1

I'm not a Clarity user, but checking the source you need to use the Layout enum. A string cannot be used as the enum member. To pass in a number for label size, just wrap the [clrLabelSize] attribute so the expression evaluates to number. Otherwise it is passed as a string.

import { Layouts } from '[pathToClarity]/layout.service';

export class YourComponent {
   Layouts = Layouts
}

<form clrForm [clrLayout]="Layouts.HORIZONTAL" [clrLabelSize]="4">

My source were theses source files: layout.service.ts, layout.ts