/ / Qual é a maneira angular 2 / datilografada de acessar e / ou manipular elementos? - jquery, html, css, angular, texto datilografado

Qual é a maneira angular 2 / datilografada de acessar e / ou manipular elementos? - jquery, html, css, angular, texto datilografado

Usando uma estrutura (materialize-css), sugiro que eu coloque o seguinte dentro de "$ (document) .ready (function () {})"para que o menu recolhível responsivo funcione:

$(".button-collapse").sideNav();

Como eu faria isso em angular? Eu sei que ngAfterContentInit é semelhante a "$ (document) .ready (function () {})":

ngAfterContentInit(): void {
//What do I put here?
}

Abaixo, você pode ver uma captura de tela que mostra o ícone do hambúrguer (que fica visível apenas nos tamanhos de tela para celular): Imagem do meu menu

Aqui está o meu html (app.component.html):

<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></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>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>

Respostas:

1 para resposta № 1

Após mais algumas pesquisas e testes de tags alternativas no stackoverflow, encontrei a resposta perfeita!

Eu tenho que garantir que o jquery esteja instalado e o angular-cli.json tenha a referência do módulo do nó do jquery incluída no início!

No meu app.component.ts, tive apenas que declarar "$" como qualquer outro.

Link para a resposta: https://stackoverflow.com/a/42295505/7018180