Soy nuevo en angular y he agregado materializar marco a mi aplicación angular por

npm install materialize-css --save 
npm install jquery --save
npm install --save hammerjs

Mi pregunta es ¿cómo puedo implementar materializar la barra de navegación en angular? lo que he probado hasta ahora es:

<ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <!-- Dropdown Trigger -->
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    </div>
  </nav>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems, options);
  });

</script>

Pero no funciona, también he probado jquery así

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script>
    $(document).ready(function () {
$(".dropdown-trigger").dropdown();

    });
  </script>
1
geekymano 23 sep. 2019 a las 15:37

1 respuesta

La mejor respuesta

Sugeriría usar Material angular.

En la sección componentes puede encontrar varios componentes de material como menú que se puede utilizar como barra de navegación principal.

Un ejemplo mínimo se vería así:

<mat-menu #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>more_vert</mat-icon>
</button>

Eche un vistazo a los ejemplos de Menú para obtener algunas ideas:

https://material.angular.io/components/menu/examples

Además, puede hacer uso de varios repositorios de inicio para ver cómo funciona Angular junto con Material, p. angular-ngrx-material-starter


Si insiste en usar materializecss puede hacer uso de 'AfterViewInit' de angular para inicializar elementos. En su archivo 'ts', implemente 'AfterViewInit' y anule el método ngAfterViewInit (). Luego escriba su código de inicialización dentro de la función setTimeout () dentro de ngAfterViewInit ().

export class NameComponent implements OnInit, AfterViewInit {
  ....

  ngAfterViewInit(): void {
    setTimeout( function() {
      var elem = document.querySelector('.sidenav');
      var instance = M.Sidenav.init(elem, options);
    }, 0)
  }

  .....

}
1
zerocewl 23 sep. 2019 a las 12:50