mdChip not properly exposing methods from API to parent component

[eginwong]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I'm trying to build a wrapper around the angular material library because there are certain customizations/enhancements that we want to add on top. When writing the wrapper, we pass inputs from the wrapper component to the angular material element. In this case, mdChip.

Expect that the methods from the API can be passed from child to parent component. This is how it currently works for mdSlideToggle.

What is the current behavior?

Methods are not currently being exposed to the parent correctly, and is throwing console errors. Also, not quite sure how to use toggleSelected because it is also throwing console errors.

VM3153 AppComponent.ngfactory.js:97 ERROR TypeError: jit_nodeValue15(...).toggleSelected is not a function
    at Object.eval [as handleEvent] (VM3153 AppComponent.ngfactory.js:101)
    at handleEvent (VM2725 core.umd.js:12079)
    at callWithDebugContext (VM2725 core.umd.js:13538)
    at Object.debugHandleEvent [as handleEvent] (VM2725 core.umd.js:13126)
    at dispatchEvent (VM2725 core.umd.js:8691)
    at eval (VM2725 core.umd.js:9302)
    at HTMLButtonElement.eval (VM2723 platform-browser.umd.js:2702)
    at e.invokeTask (VM2695 zone.min.js:1)
    at Object.onInvokeTask (VM2725 core.umd.js:3956)
    at e.invokeTask (VM2695 zone.min.js:1)
    at n.runTask (VM2695 zone.min.js:1)
    at HTMLButtonElement.invoke (VM2695 zone.min.js:1)

What are the steps to reproduce?

http://plnkr.co/edit/UtI6HF?p=preview

What is the use-case or motivation for changing an existing behavior?

Inconsistency, hard to wrap components and expose inputs

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Using:

Angular 4.0.0, Material 2.0.0-beta.7, MACOSX, TypeScript 2.3.3

probably all browsers

Is there anything else we should know?

First time submitting bug report, please let me know if I'm missing anything for next time. Thanks!

[willshowell]

For some reason, @ViewChild('child') for the chip is returning the ElementRef, not the MdChip instance. You can use @ViewChild(MdChip) to be sure to get the chip instance, but I'm not sure why it doesn't work as-is.

[eginwong]

Thanks @willshowell. Do I need any specific imports for the @ViewChild(MdChip) because as far as I'm aware, it's not exposed on its own but in the entire module.

[willshowell]

just import {MdChip} from '@angular/material'

[crisbeto]

As @willshowell mentioned, Angular can't know what directive/component you're looking for when you do a ViewChild query, unless you state it explicitly.

[eginwong]

@crisbeto Question: Should the MdChip instance be returned as opposed to the ElementRef in the case that @willshowell mentioned? I have stated that the chip is of #child in the html.

For some reason, @ViewChild('child') for the chip is returning the ElementRef, not the MdChip instance.

[crisbeto]

You can't get the MdChip instance using @ViewChild('some-string'), the only way to do so is @ViewChild(MdChip).

[eginwong]

Is this inability specific to the MdChip instance? Because in the plunker, I am able to get the MdSlideToggle instance using @ViewChild('some-string').

[willshowell]

It's because MdChip is a directive, not a component

The switch was made in #4836 without much explanation.

[eginwong]

Ahh, sorry for misunderstanding. Thanks for the clearer explanation, @willshowell @crisbeto!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}