Software Development

Angular PrimeNG Timeline Personalized – GeeksforGeeks

Angular PrimeNG Timeline Personalized – GeeksforGeeks
Written by admin


import { Element } from "@angular/core";

import { PrimeIcons } from "primeng/api";

  

@Element({

    selector: "app-root",

    templateUrl: "./app.part.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"

            }

        ];

    }

}

About the author

admin

Leave a Comment