mdlComponent function

MdlComponent mdlComponent (HtmlElement element, Type type, { bool showWarning: true })

element The element where a MDL-Component is registered

Returns the upgraded MDL-Component. If {element} is null it returns a null-MDLComponent type The requested type. If type is null it returns the first available type.

If type is null and if there are more than one types available it throws and error!

showWarning indicates a list of available components for this element if it cannot find the requested component.

Sample: static MaterialAccordion widget(final dom.HtmlElement element) => mdlComponent(MaterialAccordion,element) as MaterialAccordion;


MdlComponent mdlComponent(final dom.HtmlElement element,final Type type, { final bool showWarning: true }) {
    // final Logger _logger = new Logger('mdlcore.mdlComponent');

    if(element == null) {
        return element as MdlComponent;
    var jsElement = new JsObject.fromBrowserObject(element);

    void _listNames(var jsElement) {
        final Logger _logger = new Logger('mdlcore.mdlComponent._listNames');

        final List<String> componentsForElement = (jsElement[MDL_COMPONENT_PROPERTY] as String).split(",");"Registered Component for $element:");
        componentsForElement.forEach((final String name) {
            _logger.warning(" -> $name");

    // If element has not MDL_WIDGET_PROPERTY it is not a MDLComponent
    if (!jsElement.hasProperty(MDL_COMPONENT_PROPERTY)) {
        String id = "<not set>";
        if( != null && {
            id =;
        throw "$element is not a MdlComponent!!! "
            "(ID: $id, Classes: ${element.classes}, "
            "Dataset: ${element.dataset['upgraded']})";

    String typeAsString;
    if(type != null) {
        typeAsString = type.toString();
        //_logger.fine("Looking for $typeAsString!");

    } else if(jsElement.hasProperty(_MDL_WIDGET_PROPERTY)) {

        typeAsString = jsElement[_MDL_WIDGET_PROPERTY] as String;

    } else {
        // If there is not "type" but more then one components - throw exception!
        final List<String> componentsForElement = (jsElement[MDL_COMPONENT_PROPERTY] as String).split(",");
        if(componentsForElement.length > 1) {
            throw new WrongComponentTypeException("$element has more than one components registered. "
            "Please specify the requested type.\n"
            "Usually this is a 'MdlComponent.parent' problem...");
        typeAsString = componentsForElement.first;

    // OK we found the right type - return the component
    if(jsElement.hasProperty(typeAsString)) {
        //"Found $typeAsString - ${jsElement[typeAsString]}");
        return (jsElement[typeAsString] as MdlComponent);

    if(showWarning) {
        // Show the available names

    throw "$element is not a ${typeAsString}-Component!!!\n"
        "- ID: ${}\n"
        "- classes: ${element.classes}\n"
        "- attributes: ${element.attributes})\n"
        "These components are available: ${jsElement[MDL_COMPONENT_PROPERTY] as String}";