How do I initialize angular2 materialize component?

Question

I just started using angular2 materialize and the CSS components work fine. However when I include a component that needs initialization (such as select) I have no idea how or where to do that.

This is a snippet 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>

My component looks something like this:

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();
    }
}

muetzerich · Accepted Answer · 2016-07-06 14:43:08Z

6

add the attribute materialize="material_select"

<select materialize="material_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>

The MaterializeDirective attribute directive (materialize) accepts any MaterializeCSS initialization call to apply to the element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, leanModal, tooltip, dropdown, tabs, material_select, sideNav, etc.

Source: https://www.npmjs.com/package/angular2-materialize

answered Jul 6, 2016 at 14:43

muetzerich

5,7308 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fowdie Over a year ago

@ muetzerich Yeah thanks, I actually noticed myself the second I posted the question (typical). :P

Orlando Alfonso · Accepted Answer · 2017-10-11 15:43:13Z

1

Hi every one !!! this works form me:

import { Component, OnInit } from '@angular/core';

declare var Materialize:any; //we declarate the var Materialize for use 

@Component({
  //your code
})
export class MyComponentComponent implements OnInit {

  constructor( ) {
    //your code
  }

  ngOnInit() {
    // your code
  }

  ngAfterViewChecked(){ // Respond after Angular initializes the component's views and child views.
    Materialize.updateTextFields();// update de fields when the document and the views a are ready
                                   // in case that the inputs are empty 
  }

  updateInformation(){
     // your code ...
     Materialize.updateTextFields(); // update the fields, 
                                     // is not necesary add the class="active" in the views
  }



}

answered Oct 11, 2017 at 15:43

Orlando Alfonso

711 silver badge2 bronze badges

2 Comments

Orlando Alfonso Over a year ago

Yes because you need other angular files , this is only a configuration example in your component, you can post your code for help you

Gaspa79 Over a year ago

Yup worked! Btw I noticed that your native language is Spanish due to your name and the "update DE fields" instead of "the". Jajaja Gracias!

Collectives™ on Stack Overflow

How do I initialize angular2 materialize component?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related