Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad.
En este artículo, sabremos cómo usar el componente TimeLine en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código.
Componente TimeLine: Se utiliza para mostrar la línea de tiempo del proceso.
Propiedades:
- valor : es una array de eventos para mostrar. Es de tipo de datos de array y el valor predeterminado es nulo.
- align : Es la posición de la barra de la línea de tiempo relativa al contenido. Es del tipo de datos de string y se deja el valor predeterminado.
- layout : Es la orientación de la línea de tiempo. Es de tipo de datos de string y el valor predeterminado es vertical.
- style : Es el estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- styleClass : Es la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
Estilo:
- p-timeline: Es el elemento contenedor.
- p-timeline-left: Es el elemento contenedor cuando se deja la alineación.
- p-timeline-right: Es el elemento contenedor cuando la alineación es correcta.
- p-timeline-top: Es el elemento contenedor cuando la alineación es superior.
- p-timeline-bottom: Es el elemento contenedor cuando la alineación es inferior.
- p-timeline-alternate: Es el elemento contenedor cuando la alineación es alterna.
- p-timeline-vertical: Es el elemento contenedor de una línea de tiempo vertical.
- p-timeline-horizontal: Es el elemento contenedor de una línea de tiempo horizontal.
- p-timeline-event: Es el elemento del evento.
- p-timeline-event-opposite: Es lo opuesto al contenido del evento.
- p-timeline-event-content: Es el contenido del evento.
- p-timeline-event-separator: Es el elemento separador de un evento.
- p-timeline-event-marker: Es el elemento marcador de un evento.
- p-timeline-event-connector: Es el elemento conector de un evento.
Creación de aplicaciones angulares e instalación de módulos:
Paso 1: Cree una aplicación Angular usando el siguiente comando.
ng new appname
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.
cd appname
Paso 3: Instale PrimeNG en su directorio dado.
npm install primeng --save npm install primeicons --save
Estructura del proyecto: Tendrá el siguiente aspecto:
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Línea de tiempo.
app.component.html
<div class="card">
<h5>Left Align</h5>
<p-timeline [value]="gfg">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
<div class="card">
<h5>Right Align</h5>
<p-timeline [value]="gfg" align="right">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
<div class="card">
<h5>Alternate Align</h5>
<p-timeline [value]="gfg" align="alternate">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
</div>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
})
export class AppComponent {
gfg: any[];
ngOnInit() {
this.gfg = [
{
status: "Time 1",
},
{
status: "Time 2",
},
{
status: "Time 3",
},
{
status: "Time 4",
},
];
}
}
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { FormsModule } from "@angular/forms";
import { TimelineModule } from "primeng/timeline";
import { CardModule } from "primeng/card";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
TimelineModule,
CardModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de diseño en el componente de línea de tiempo.
app.component.html
<h6>Top Align</h6>
<p-timeline [value]="arr" layout="horizontal" align="top">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
<h6>Bottom Align</h6>
<p-timeline [value]="arr" layout="horizontal" align="bottom">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
</p-timeline>
<h6>Alternate Align</h6>
<p-timeline [value]="arr" layout="horizontal" align="alternate">
<ng-template pTemplate="content" let-event>
{{event.status}}
</ng-template>
<ng-template pTemplate="opposite" let-event>
</ng-template>
</p-timeline>
app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
arr: any[];
ngOnInit() {
this.arr = [
{
status: "Time1",
},
{
status: "Time2",
},
{
status: "Time3",
},
{
status: "Time4",
},
];
}
}
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { FormsModule } from "@angular/forms";
import { TimelineModule } from "primeng/timeline";
import { CardModule } from "primeng/card";
import { AppComponent } from "./app.component";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
TimelineModule,
CardModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/timeline