Search code examples
angularinputenumstimelinevmware-clarity

Clarity Angular Vertical Timeline enum

I installed Clarity Design System and added a Timeline component

<clr-timeline>
  <clr-timeline-step>
    <clr-timeline-step-header>11:59 am</clr-timeline-step-header>
  </clr-timeline-step>
</clr-timeline>

I want to change layout to vertical on first HTML tag. <clr-timeline [clrLayout]="'VERTICAL'"> But the input is an enum and I cannot give string values.

I imported in a class field

import { ClrTimelineLayout } from '@clr/angular/timeline';
..
orientation = ClrTimelineLayout.VERTICAL;

Error follows: Module not found: Error: Can't resolve '@clr/angular/timeline'

Solution

  • First check if you have @clr/core@next installed

    Refer this to check correct installation https://clarity.design/documentation/get-started https://github.com/vmware/clarity/issues/4244

    <clr-timeline [clrLayout]="orientation"><!--add this-->
  <clr-timeline-step>
    <clr-timeline-step-header>11:59 am</clr-timeline-step-header>
  </clr-timeline-step>
</clr-timeline>