Angular 2 initialize materialize component after obtaining data

Navigation
0

I have a dropdown that I want to initialize with materialize in navbar.component.html 

<select>
   <option *ngFor="let survey of surveys" value="{{survey.sid}}">
   {{survey.surveyls_title}}</option>
</select>

I get the data from navbar.component.ts 

surveys: Survey[] = [];

    private loadAllSurveys(){
        this.surveyService.getAll().subscribe(surveys => { this.surveys = surveys; });
    }

    /* Aquí inicializo un sidenav de materialize */
    ngAfterViewInit(){
        $(document).ready(function(){
            $(".button-collapse").sideNav({
                menuWidth: 300, 
                edge: 'right', 
                closeOnClick: true,
                draggable: true 
            });

        });
     }

The problem I have is that I do not know how to initialize, I mean where to place the: 

$('select').material_select();

so that it is executed after painting the data obtained by means of the subscribe, because otherwise it is empty and inseparable.

    
asked by PriNcee 12.05.2017 в 09:28
source

2 answers

1

Use the ngOnInit event to access the DOM once it has loaded.

As additional advice, using jQuery and Angular is not good practice.

    
answered by 12.05.2017 / 16:42
source
0

I was also looking for the same and managed to get to the solution my ts file stayed like this: 

import { Component, OnInit, ElementRef } from '@angular/core';
declare var jQuery: any;

@Component({
selector :'menu',
templateUrl: './menu.component.html',
styleUrls:   ['./menu.component.css']
})
export class menu implements OnInit {

constructor(private el:ElementRef){}

ngOnInit() {


$(document).ready(function() {
$('select').material_select();
});

}

chance = [
{modo: 'A'},
{modo: 'B'},
{modo: 'B'},
];

}
    
answered by 20.12.2017 в 21:50
Ajax in ruby on rails, the remote process does not work: true Is it possible to access a static attribute without using self :: or ClassName :: in object-oriented PHP?