Creando un menu responsive con bootstrap usando NgClass directive

En este tutorial veremos como crear un menú responsive con bootstrap en Angular, lo implementaremos usando NgClass.
Empecemos.

Para aquellos que quieren hacerlo desde cero deben instalarse primero Angular CLI y luego crearse el proyecto. asumo que ya han hecho este paso si no, lo pueden ver en el curso (obviamente) o buscarlo en Google “es muy simple”.

una vez hecho esto su directorio del proyecto debería verse así:

-e3e
-node_modules
-src
--app
---app.component.css
---app.component.html
---app.component.ts
---app.component.spec.ts
---app.module.ts
--assets
--enviroments
--favicon.ico
--index.html
--main.ts
--polyfills-ts
--styles.css
--test.ts
--tsconfig.app.json
--tsconfig.spec.json
--typings.d.ts
-angular-cli.json
-.editorconfig
-.gitignore
-karma.conf.js
-package-lock.json
-package.json
-protactor.conf.js
-Readme.md
-tsconfig.json
-tslint.json

Se ve un poco extenso pero lo que nos interesa de verdad y donde se desarrolla el proyecto en si, es en la carpeta src/app

Por cierto en este tutorial uso bootstrap 4
Nos dirigimos a app.component.html y colocamos el siguiente código (disponible en la documentación de bootstrap)

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">
    <img src="../assets/ngsquare.png" alt="logo">
  </a>
  <button class="navbar-toggler collapsed"type="button">
    <span class="navbar-toggler-icon"></span>
  </button>

  **<div class="collapse navbar-collapse">**
    <ul class="navbar-nav mr-auto">
      <li routerLinkActive="active"class="nav-item">
        <a class="nav-link" routerLink="/lugares">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li routerLinkActive="active"class="nav-item">
        <a class="nav-link" routerLink="/contacto">Contacto</a>
      </li>
    </ul>

Observemos que en la linea marcada, tenemos una clase llamada collapse y que si la quitamos, podemos ver que se despliega el menú y si la ponemos colapsa.

Genial! ahora solo tenemos que hacer la interacción con el botón y typescript. para esto angular tiene algo llamado NgClass Directive que nos
permite añadir o remover clases del html y le podemos pasar varios argumentos exactamente 3:

• un string, podemos añadir una o mas clases siempre y cuando esten separados por un ‘espacio’, ejemplo. [ngClass]="‘uno dos’"
• un array
• un objeto

ahora aplicaremos el NgClass (recordemos todo esto es en app.component.html):

<divclass="navbar-collapse"
     [ngClass]="{ 'collapse': true }"><ulclass="nav navbar-nav"><li><a>Link 1a>li>
           <li><a>Link 2a>li>
     </ul></div>

Aquí hemos hard-codeado el valor para ver solo si funciona, si lo ponemos en falso será como no la aplicáramos y en true como si sí
ahora para hacerlo interactivo con el botón nos vamos al app.component.ts

exportclassappComponent{
    isCollapse = false;   // guardamos el valor
    toggleState() { // manejador del eventolet foo = this.isCollapse;
        this.isCollapse = foo === false ? true : false; 
    }
}

Aplicamos una lógica muy simple como pueden ver, ahora nos aseguramos de poner el trigger del evento, para eso nos vamos de vuelta al app.component.html

<navclass="navbar sticky-top navbar-expand-lg navbar-dark bg-dark"><aclass="navbar-brand"href="#"><imgsrc="../assets/ngsquare.png"alt="logo"></a><buttonclass="navbar-toggler collapsed"type="button" **(click)="toggleState()"**><spanclass="navbar-toggler-icon"></span></button><divclass="navbar-collapse" **[ngClass]="{ 'collapse': isCollapse }"**><ulclass="navbar-nav mr-auto"><lirouterLinkActive="active"class="nav-item"><aclass="nav-link"routerLink="/lugares">Inicio <spanclass="sr-only">(current)</span></a></li><lirouterLinkActive="active"class="nav-item"><aclass="nav-link"routerLink="/contacto">Contacto</a></li></ul>

ahora cada vez que le demos click al botón se dispara la función que a la vez esta simplemente pone el valor en true o false por medio de un ngClass

simplemente corremos en la terminal el comando ng serve y veremos que funciona o al menos debería.

como ven angular es muy facil de aprender y usarlo, existe ese mito o ‘cuento urbano’ de que es muy complicado que no se que mas, a mi parecer es muy sencillo y me atrevería a decir que es mucho mas que react. Al menos a mi me costo menos.
déjenme saber abajo en los comentarios que piensan.

aqui esta mi proyecto en github de NgSquare (copia NO barata porque le dedique bastante tiempo)
https://github.com/Jesussandrea12/ngsquare

y el deploy en firebase
https://ngsquare-1e245.firebaseapp.com/lugares

y hasta la proxima platzerito curioso!..

PD: debo agradecer a GOLLUM que me ayudo a resolver varios errores y lo ladille bastante!