Error while initializing materializecss dropdown from angularjs

materialize css
angular materialize
materialize select not working
how to use materialize css in html
materialize css react
import materialize-css
materialize trackid sp 006
materialize sandbox

I am loading materializecss dropdown dynamically, from an angularjs template. So initializing it at the start when main page is loaded is not working. I added following code to initialize other elements as well as dropdown in the last line

//Inside angularjs controller
//Main Left Sidebar Menu
$('.sidebar-collapse').sideNav();

// FULL SCREEN MENU (Layout 02)
$('.menu-sidebar-collapse').sideNav();

// HORIZONTAL MENU (Layout 03)
$('.dropdown-menu').dropdown();

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

$('.collapsible').collapsible();

$('.dropdown-button').dropdown();

Every other elements are getting initialized except the dropdown. I am getting following error due to the last line, if i remove that line everything works fine except dropdowns. I am new to angular js as well as front end development. I have already searched on web, still not able to find any answer. Appreciate if you help me with this.

TypeError: Cannot read property 'childNodes' of undefined
at compositeLinkFn     (http://localhost/TempProject2/js/angular/angular.js:7641:36)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at compositeLinkFn (http://localhost/TempProject2/js/angular/angular.js:7641:13)
at nodeLinkFn (http://localhost/TempProject2/js/angular/angular.js:8241:24) <div ui-view="" class="ng-scope">

I got it working by including the dropdown content in the anchor tag that holds the data-activates attribute for the dropdown. Take a look at the code below:

  <!-- Dropdown Trigger -->
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1" id="test">Dropdown<i class="material-icons right">arrow_drop_down</i>
  <!-- Dropdown Structure -->
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
  </a>
  </li>

Materialize Select with Angular not working (browser-default does , I am loading materializecss dropdown dynamically, from an angularjs template. So initializing it at the start when main page is loaded is not working. I added  So, I had three regular tabs. In first tab, the input select dropdown works. In the 2nd tab, the input select dropdown did not work. After I turned the tabs into tab-like nav with links to three children routes, all the dropdowns across different tabs work.

I had a similar problem until I found a hack that worked.

Remove the dropdown-content from the scope of the controller.

In SomeController
// add dropdown code
$('.dropdown-button').dropdown();


In your html, place the drop-down content outside the Controller scope
<section ng-controller="SomeController">
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1" id="test">Dropdown<i class="material-icons right">arrow_drop_down</i>
</section>
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

You can either place it at the top or bottom. I'm still not sure why this hack works though :)

material design, Bug Description When using the material select box with angular either through ng-repeat or by using ng-model and ng-options the strings do  In this Angular select dropdown example, we will use the Angular Material library to construct UI/UX. Angular Material components will help us in building attractive UI and UX, consistent, and functional web pages and web applications while keeping to modern web design principles like browser portability and compatibility, device independence, and graceful degradation.

In your controller, wrap the dropdown init with a timeout. Ex:

$timeout(function(){ M.Dropdown.init(document.querySelectorAll('.dropdown-trigger')); }, 0);

Angularjs directives for Materialize CSS Framework, material design - Error while initializing materializecss dropdown from angularjs - dropdowns. new angular js front end development. have searched on web,  See also Angular CLI 3rd Party Library Installation and Using MaterializeCSS with your Angular 2 Angular CLI App.. Icons. Ngx-materialize offers two "out-of-the-box" options for icons although you are free to use the library of your choice.

Please initialize $('.dropdown-button').dropdown(); in document.ready function.

It should run after document is ready.

Select, But that doesn't work properly when angular dynamically creates element then the material-select will re-initialize whenever something changes in the content  About angular-materialize. This plugin is useful for you if you want to use the Materialize UI framework with angular.. It includes a number of directives, which makes sure that the components in materialize.js, which are mainly initialized on document ready, are handled by Angular in the right way.

Auto Init, input-field for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you initialize this in your document ready. Auto Init allows you to initialize all of the Materialize Components with a single function call. It is important to note that you cannot pass in options using this method.

Autocomplete, Auto Init allows you to initialize all of the Materialize Components with a single function call. It is important to note that you cannot pass in options using this  In this post, we are going to go through a complete example of how to build a custom dialog using the Angular Material Dialog component. We are going to cover many of the most common use cases that revolve around the Angular Material Dialog, such as: common dialog configuration options,

Collapsible, Add an autocomplete dropdown below your input to suggest possible values in your form. options, Object, The options the instance was initialized with. Modals with Fixed Footer Modal With Fixed Footer. If you have content that is very long and you want the action buttons to be visible all the time, you can add the modal-fixed-footer class to the modal.

Comments
  • Facing same issue, any solution?
  • I don't think this will solve the problem of property not found. It's similar to var obj; and then accessing property a of obj like obj.a which doesn't exist as obj is undefined.