Skip to content

PrimeNg

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

Instalación

Desde la terminal de VS Code, ubicado en la carpeta del proyecto de Angular

npm install primeng --save 
npm install primeicons --save 
npm i primeflex --save

En el archivo angular.json

"styles": [
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.css"
            ],

Componente ASIDE

Iniciemos con nuestro primer componente MenuBar

Primero colocamos el codigo src/app/components/layout/aside/aside.component.ts

import { Component } from '@angular/core';
import { PanelMenuModule } from 'primeng/panelmenu';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [PanelMenuModule],
  templateUrl: './aside.component.html',
  styleUrl: './aside.component.css'
})
export class AsideComponent {
  items: MenuItem[]=[];


  ngOnInit(): void {
    this.items = [
      {
        label: 'Clientes',
        icon: 'pi pi-fw pi-users',
        routerLink: '/clientes'
        // items: [
        //   {
        //     label: 'Crud Cliente'
        //   },
        //   {
        //     label: 'HTML 2'
        //   }
        // ]
      },
      {
        label: 'Tipo Productos',
        icon: 'pi pi-fw pi-qrcode',
      },
      {
        label: 'Productos',
        icon: 'pi pi-fw pi-shopping-bag',
      },
      {
        label: 'Ventas',
        icon: 'pi pi-fw pi-shopping-cart',
      }

    ];
  }
}

Código src/app/components/layout/aside/aside.component.html

<div class="card flex justify-content-center">
    <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
</div>

y vamos al navegador http://localhost:4200

Componente HEADER

Trabajaremos con PrimeFlex:

Para complementar las directivas del componente, vamos a src/app/components/layout/header/header.component.html

<div class="grid h-full">
    <div class="col-3 flex flex-wrap align-items-center justify-content-center">
        <!-- <h1 class="">Logo</h1> -->
            <img src="../../../../assets/images/uniguajira.png" alt="" class="h-8rem py-0 px-0">
    </div>
    <div class="col-7 flex flex-wrap align-items-center justify-content-center">
            <h1 class="">Software Almacen</h1>
            <p class="">
                Aplicativo que permite llevar todo sistematizado ... !!!
            </p>
    </div>
    <div class="col-2 flex flex-wrap align-items-center justify-content-center">
        <!-- <h1 class="">Sesion</h1> -->
        <img src="../../../../assets/images/Users.png" alt="" class="h-8rem py-3 px-5">
    </div>

</div>

y vamos al navegador http://localhost:4200

src/app/components/layout/footer/footer.component.html

<div class="grid h-full">

    <div class="col-12 flex flex-wrap align-items-center justify-content-center">
            <p class="text-xs text-blue-700">
                CopyRigth 2024
            </p>
    </div>

</div>

y vamos al navegador http://localhost:4200