Angular - Instalación

Instalar vía CLI

Abrimos en Visual Studio Code la terminal.

Requisitos

Crear proyecto

ng new frontend

cd frontend
ng s

Ahora instalamos Tailwin CSS para angular

npm install tailwindcss @tailwindcss/postcss postcss --force

Creamos el archivo .postcssrc.json en la ruta frontend/.postcssrc.json

el siguiente codigo

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

queda asi:

Import Tailwind CSS

Adicionamos @import en ./src/styles.css

@import "tailwindcss";

Levantamos el servidor con

ng s

Para probar que todo este funcionando bien hacemos lo siguiente:

En frontend/src/app/app.html

<h1>Desarrollo Web</h1>

<router-outlet />

Si observas el resultado igual a la imagen anterior, incluyendo el tipo de fuente, entonces todo esta correcto.

Usando npm

npm install primeng @primeuix/themes

Ahora en el archivo frontend/src/app/app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/aura';


import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
        providePrimeNG({
            theme: {
                preset: Aura
            }
        })
  ]
};

Quedaria asi:

Creamos los componentes de Layout

ng g c components/layout/header
ng g c components/layout/aside
ng g c components/layout/footer

Aplicamos la propiedad

standalone: true,

A todo los componentes incluyendo el componente app-root principal en

frontend/src/app/app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('frontend');
}

frontend/src/app/components/layout/aside/aside.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [],
  templateUrl: './aside.html',
  styleUrl: './aside.css'
})
export class Aside {

}

frontend/src/app/components/layout/footer/footer.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  standalone: true,
  imports: [],
  templateUrl: './footer.html',
  styleUrl: './footer.css'
})
export class Footer {

}

frontend/src/app/components/layout/header/header.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [],
  templateUrl: './header.html',
  styleUrl: './header.css'
})
export class Header {

}

Luego se importan los componentes de layout en app-root

frontend/src/app/app.ts

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Header } from './components/layout/header/header';
import { Footer } from './components/layout/footer/footer';
import { Aside } from './components/layout/aside/aside';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, Header, Footer, Aside],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('frontend');
}

Levantamos el servidor

ng s

En el navegador se debe ver asi:

Procedemos a insertar el menu en aside

Elegimos PanelMenu

frontend/src/app/components/layout/aside/aside.html

<div class="card flex justify-center">
    <p-panelmenu [model]="items" class="w-full md:w-80" />
</div>

frontend/src/app/components/layout/aside/aside.ts

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { PanelMenu } from 'primeng/panelmenu';

@Component({
  selector: 'app-aside',
  standalone: true,
  imports: [PanelMenu],
  templateUrl: './aside.html',
  styleUrl: './aside.css'
})
export class Aside implements OnInit{
  items: MenuItem[] | undefined;
  ngOnInit() {
        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',
      }

    ];
    }
}

Levantamos el servidor

ng s ng s