Angular PrimeNG Timeline Customized – GeeksforGeeks
import { Component } from
"@angular/core"
;
import { PrimeIcons } from
"primeng/api"
;
@Component({
selector:
"app-root"
,
templateUrl:
"./app.component.html"
,
styleUrls: [
"./app.component.scss"
]
})
export class AppComponent {
gfg: any[];
ngOnInit() {
this
.gfg = [
{
title:
"1. Narendra Modi"
,
Date:
"26 May 2014 - Present"
,
Icon: PrimeIcons.SORT_UP,
color:
"#9C27B0"
,
ButtonColor:
"p-button-rounded p-button-secondary"
},
{
title:
"2. Manmohan Singh"
,
Date:
"22 May 2004 to 26 May 2014"
,
Icon: PrimeIcons.SORT_UP,
color:
"#673AB7"
,
ButtonColor:
"p-button-rounded p-button-primary"
},
{
title:
"3. Atal Bihari Vajpayee"
,
Date:
"19 March 1998 to 22 May 2004"
,
Icon: PrimeIcons.SORT_UP,
color:
"#FF9800"
,
ButtonColor:
"p-button-rounded p-button-success"
},
{
title:
"4. Inder Kumar Gujral"
,
Date:
"21 April 1997 to 19 March 1998"
,
Icon: PrimeIcons.SORT_UP,
color:
"#607D8B"
,
ButtonColor:
"p-button-rounded p-button-danger"
},
{
title:
"5. H. D. Deve Gowda"
,
Date:
"1 June 1996 to 21 April 1997"
,
Icon: PrimeIcons.SORT_UP,
color:
"#99e2ff"
,
ButtonColor:
"p-button-rounded p-button-warning"
},
{
title:
"6. Atal Bihari Vajpayee"
,
Date:
"16 May 1996 to 1 June 1996"
,
Icon: PrimeIcons.SORT_UP,
color:
"#99e200"
,
ButtonColor:
"p-button-rounded p-button-help"
}
];
}
}
import { Component } from
"@angular/core"
;
import { PrimeIcons } from
"primeng/api"
;
@Component({
selector:
"app-root"
,
templateUrl:
"./app.component.html"
,
styleUrls: [
"./app.component.scss"
]
})
export class AppComponent {
gfg: any[];
ngOnInit() {
this
.gfg = [
{
title:
"1. Narendra Modi"
,
Date:
"26 May 2014 - Present"
,
Icon: PrimeIcons.SORT_UP,
color:
"#9C27B0"
,
ButtonColor:
"p-button-rounded p-button-secondary"
},
{
title:
"2. Manmohan Singh"
,
Date:
"22 May 2004 to 26 May 2014"
,
Icon: PrimeIcons.SORT_UP,
color:
"#673AB7"
,
ButtonColor:
"p-button-rounded p-button-primary"
},
{
title:
"3. Atal Bihari Vajpayee"
,
Date:
"19 March 1998 to 22 May 2004"
,
Icon: PrimeIcons.SORT_UP,
color:
"#FF9800"
,
ButtonColor:
"p-button-rounded p-button-success"
},
{
title:
"4. Inder Kumar Gujral"
,
Date:
"21 April 1997 to 19 March 1998"
,
Icon: PrimeIcons.SORT_UP,
color:
"#607D8B"
,
ButtonColor:
"p-button-rounded p-button-danger"
},
{
title:
"5. H. D. Deve Gowda"
,
Date:
"1 June 1996 to 21 April 1997"
,
Icon: PrimeIcons.SORT_UP,
color:
"#99e2ff"
,
ButtonColor:
"p-button-rounded p-button-warning"
},
{
title:
"6. Atal Bihari Vajpayee"
,
Date:
"16 May 1996 to 1 June 1996"
,
Icon: PrimeIcons.SORT_UP,
color:
"#99e200"
,
ButtonColor:
"p-button-rounded p-button-help"
}
];
}
}