1
resposta

Menu dropDown feito coim Materialize

[RESOLVIDO] Boa tarde!

Criei um menu dropdown com o materialize 0.100.2 em meu painel administrativo.

Para acessar esse painel administrativo precisa-se antes loga-se pela tela de login.

Uso um navigate caso o login seja feito com sucesso e direciono para o painel. Mas quando faço isso o menu dropdown já fica aberto e não funciona nenhum clique para abri-lo ou fecha-lo. Porem se eu atualizo a pagina ele funciona normalmente.

Para que o materialize funcione certinho estou usando um módulo chamada angular2Materialize para não ficar escrevendo funções js no componente.

Alguém sabe o que pode ser isso, eu acredito que quando o angular renderiza a pagina ele ainda não encontrou os arquivos js para fazer funcionar o menu dropdown, mas quando atualizo a pagina ele encontra.

Não sei, alguma sugestão?

Cód do menu:

<ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
            <li>
                <a class="collapsible-header"><i class="fas fa-chart-pie fa-lg m-margin-right icon-color"></i>Funções
                    da agenda</a>
                <div class="collapsible-body" style="display:block;">
                    <ul>
                        <li>
                            <a href="#" class="waves-effect waves-dark">
                                <i class="fas fa-tachometer-alt m-margin-right m-margin-left fa-lg icon-color"></i>Gerenciar
                                agenda
                            </a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect waves-dark">
                                <i class="far fa-clipboard m-margin-right m-margin-left fa-lg icon-color"></i>Cliente/Proposta
                            </a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect waves-dark">
                                <i class="fas fa-ban m-margin-right m-margin-left fa-lg icon-color"></i>Bloquear
                            </a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect waves-dark">
                                <i class="fas fa-times m-margin-right m-margin-left fa-lg icon-color"></i>Canceladas
                            </a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect waves-dark">
                                <i class="fas fa-car m-margin-right m-margin-left fa-lg icon-color"></i>Logística do
                                dia
                            </a>
                        </li>
                        <li>
                            <a href="#" class="waves-effect waves-dark">
                                <i class="fas fa-calendar-alt m-margin-right m-margin-left fa-lg icon-color"></i>Administrar
                                calendário
                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

importação no meu módulo:

import { MaterializeModule } from 'angular2-materialize';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    PainelAdministrativoModule,
    ErrorsModule,
    AppRoutingModule,
    MaterializeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Muito obrigado!

1 resposta

Fala aí Tamires, tudo bem? Consegue criar uma resposta com a solução do problema e marcá-la como a responsável por resolver o tópico? Dessa maneira pode ajudar outros alunos com o mesmo ou problema parecido.

Obrigado e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software