Angular 6 - Material Design (Debian Stretch)

1. Instalación o actualización del framework angular
 Instalación desde cero
   - Inicialmente debemos instalar nodjs, para eso ejecutamos los siguientes comandos como superusuario

   curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
   sudo apt-get install -y nodejs

- Una vez instalado nodejs, procedemos a instalar angular cli

    sudo npm install -g @angular/cli@latest

Actualización de angular 4 a 6
- Actualizar nodejs, para eso ejecutamos los siguientes comandos:

   sudo npm cache clean -f
   sudo npm install -g n
   sudo n stable

 Nota en caso de que se quiera act. a una versión especifica nodejs, ejecutar el siguiente comando

   sudo npm cache clean -f
   sudo npm install -g n

   sudo n 8.9.4

vemos la version de nuestro node con el siguiente comando

   node -v

- Actualizar angular cli

    npm install -g @angular/cli@latest

2. Crear un proyecto en angular, para eso haremos lo siguiente:
  - crear un directorio donde estará nuestro proyecto en angular, para eso ejecutamos el siguiente comando:
     

    mkdir proyecto

    cd proyecto

- Creamos el proyecto, ejecutando el siguiente comando:

     ng new app-basic
Este comando lo que hace es crear el nuestro proyecto, en este caso lo llamamos app-basic, y tendrá la siguiente estructura.

3. Ver el proyecto creado, para ver nuestro proyecto en el navegador, ejecutamos el siguiente comando

  ng serve --open // esta opción abre automáticamente el navegador mostrando el proyecto creado
 ng serve    //  abre el navegador de manera automática, para mostrar el proyecto creado, poner localhost:4200


4. Instalacion de material-design, para esto ingresamos a la carpeta de nuestro proyecto, en mi caso "app-basic" y ejecutamos el siguiente comando.

ng add @angular/material


 Al ejecutar este comando, tendremos una carpeta de nombre material en nuestro directorio app


5. Y hasta aqui estamos listos para agregar nuestros objetos. Creamos nuestros objetos en este caso un navbar


 ng generate @angular/material:material-nav --name=navbar

al crear este objeto, veremos que en nuestro directorio app, tenemos una nueva carpeta con el nombre de nuestro objeto, en este caso "navbar"

6. Visualizar nuestro objeto.Para hacer una visualización de una manera rapida nuestro objeto hacemos lo siguiente.


- en nuestro archivo app.component.html, llamamos a nuestro objeto navbar




<navbar></navbar>

<router-outlet></router-outlet>

7. Visualizar nuestro objeto.Para eso primero detenemos nuestro servicio de node presionando la combinacion de teclas crtl+c y seguidamente ejecutamos el comando 

      ng serve --open