I'm new to using angular2 materialize and I've found that the CSS components work perfectly fine. However, I'm facing an issue when it comes to initializing components like 'select'. I'm unsure of how or where to do this initialization.
Below is a part of my form:
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
This is how my component is structured:
import {Component, ElementRef, Inject, OnInit} from '@angular/core';
import {MaterializeDirective} from "angular2-materialize";
declare var jQuery:any;
@Component({
selector: 'bsi-signup',
styleUrls: ['assets/styles/app.component.css'],
templateUrl: 'assets/templates/signup.component.html',
directives: [MaterializeDirective],
providers: []
})
export class SignupComponent implements OnInit {
elementRef: ElementRef;
constructor(@Inject(ElementRef) elementRef: ElementRef) {
this.elementRef = elementRef;
}
ngOnInit() {
jQuery(this.elementRef.nativeElement).find('select:not([multiple])').material_select();
}
}