Config - Angular - PRIME NG y UTILIDADES

   @                      @                    @@@@      @              
  @@                      @                    @   @                    
  @ @   @@@@  @@@@@ @   @ @  @@@ @@            @   @ @@  @ @@@@ @@  @@@ 
  @ @   @@  @@@   @ @   @ @    @ @             @   @ @   @ @   @  @@   @
 @   @  @   @@    @ @   @ @  @@@ @             @@@@  @   @ @   @  @@@@@@
 @@@@@  @   @@    @ @   @ @ @  @ @      @@@    @     @   @ @   @  @@    
@    @  @   @@@  @@ @   @ @ @  @ @             @     @   @ @   @  @@@   
@     @ @   @ @@@ @  @@@@ @ @@@@ @             @     @   @ @   @  @ @@@@
                  @                                                     
              @@@@                                                      
//------------------------//
//--CREAR NUEVO PROYECTO--//
//------------------------//
ng new project
//SE ESCOGE LOS ESTILOS GENERALES CON SASS

//----------------------//
//--ENTRAR AL PROYECTO--//
//----------------------//
cd project

//-------------------------//
//--INSTALAR DEPENDENCIAS--//
//-------------------------//
npm install primeng --save
npm install primeicons --save

//---------------------------//
//--INSTALAR LA ANIMACIONES POR CONSOLA GENERAL y parado en el proyecto--//
//---------------------------//
npm install @angular/animations --save

//---------------------------------------------//
//--IMPORTAMOS LAS ANIMACIONES EN APP MODULES--//
//---------------------------------------------//
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
BrowserAnimationsModule

//---------------------------------------------------------------//
//--ACTUALIZAR LOS ESTILOS DEL ARCHIVO: project/src/styles.scss--//
//---------------------------------------------------------------//
@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';


//---------------------------------------------------------------//
//--ACTUALIZAMOS LAS DEPENDENCIAS DE "project/src/package.json"--//
//---------------------------------------------------------------//
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "core-js": "^2.5.4",
    "primeflex": "^1.0.0-rc.1",
    "primeicons": "^1.0.0",
    "primeng": "^8.0.0-rc.1",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  
//-------------------------------------------------------------------//
//--ACTUALIZAR LOS ESTILOS EN EL ARCHIVO "project/src/angular.json"--//
//-------------------------------------------------------------------//
              "styles": [
              "src/styles.scss",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],
  
    //REVISAR QUE TODO ESTE GUARDADO Y EJECUTAMOS EN CONSOLA DE VISUAL:
  npm i
  //CERRAR Y ABRIR EL VISUAL STUDIO CODE
  
      
//------------------------------------------------------------------------------------------------//
//--EJEMPLO PARA CONSUMIR UN JSON POR Servicio expuesto en la URL http://localhost:3000/personas--//
//------------------------------------------------------------------------------------------------//
  
 //DE UN ARCHIVO JSON UBICADO EN LA RAIZ: datos.json
 //EJECUTAR EN UNA TERMINAL:
 npm install -g json-server
 //EJECUTAR EN OTRA TERMINAL CONSECUTIVAMENTE:
 json-server --watch datos.json
 

//--SERVICES/USUARIO.SERVICE.TS--//
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { UsuarioModel } from '../models/usuario.model';

@Injectable({
  providedIn: 'root'
})
export class UsuarioService {

  private ruta = 'http://localhost:3000/usuario';

  constructor( private httpCliente: HttpClient) { }

  consultarUsuario(): Observable<any> {
    return this.httpCliente.get<any>(this.ruta);
  }
}

//--MODELS/USUARIO.MODEL.TS--//
export class UsuarioModel {
    public id: string;
    public nombre: string;
    public estado: boolean;
    public edad: number;
    public company: string;
    public correo: string;
    public foto: string;
}

//--COMPONENTS/USUARIO.COMPONENT.TS--//
import { Component, OnInit } from '@angular/core';
import { UsuarioService } from 'src/app/services/usuario.service';
import { UsuarioModel } from 'src/app/models/usuario.model';

@Component({
  selector: 'app-usuario',
  templateUrl: './usuario.component.html',
  styles: []
})
export class UsuarioComponent implements OnInit {

  usuario: UsuarioModel[];
  foto: any[];

constructor(private usuarioService: UsuarioService) { }

ngOnInit() {

  this.usuarioService.consultarUsuario().subscribe(elementos => {
    console.log(elementos);
    this.usuario = elementos;
  });
}
}

//--COMPONENTS/USUARIO.COMPONENT.HTML--//
<p-table [value]="usuario" [paginator]="true" [rows]="5">
  <ng-template pTemplate="header" >
      <tr>
          <th style="width:15%;">Nombre</th>
          <th style="width:15%;">Estado</th>
          <th>Edad</th>
          <th style="width:10%;">Empresa</th>
          <th style="width:20%;">Correo</th>
          <th style="width:20%;">Imagen</th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-usuario>
      <tr>
          <td>{{usuario.nombre}}</td>
          <td>{{usuario.estado}}</td>
          <td>{{usuario.edad}}</td>
          <td>{{usuario.company}}</td>
          <td>{{usuario.correo}}</td>
          <td align="center"><img src="{{usuario.foto}}" style="height: 200px;"></td>
      </tr>
  </ng-template>
</p-table>