Angular UI Components Documentation

Sets or gets whether the Timeline is with auto width in horizontal mode.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [autoWidth]='true'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

Sets or gets whether the items can be collapsed.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [collapsible]='true'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

Sets or gets whether the Timeline is disabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [disabled]='true'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

Sets or gets whether the Timeline is horizontal.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [horizontal]='true'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

Sets or gets position.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [position]='"near"'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

Sets or gets the items. Each item should be an object. The object has the following properties: date: date, description: string, subtitle: string, css: string, dotCSS: string, title: string and icon: string.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [source]='[{ date: "May 15, 2024", description: "Flight: Reserving airline tickets", subtitle: "May 15, 2024", title: "Flight Reservation", icon: "material-icons flight", dotCSS: "" }]'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
       [theme]='"material"'>
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
}

Re-renders the timeline.

import { Component, ViewChild } from '@angular/core';
 
import { jqxTimelineComponent } from 'jqwidgets-ng/jqxtimeline';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxTimeline #myTimeline 
      >
    Check Me Out!
    </jqxTimeline>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myTimeline', { static: false }) myTimeline!: jqxTimelineComponent;
  
  public ngAfterViewInit(): void {
    this.myTimeline.render();
  }
}