Why the template reference variable of the tag "md-button-toggle-group" is not an instance of MdButtonToggleGroup?

[eric-heihei]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Template reference variable of the tag "md-button-toggle-group" is an instance of MdButtonToggleGroup.

What is the current behavior?

Template reference variable of the tag "md-button-toggle-group" is not an instance of MdButtonToggleGroup.

What are the steps to reproduce?

The cod in the "app.module.ts" file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import 'hammerjs';
import { MdCoreModule } from '@angular2-material/core';
import { MdCheckboxModule } from '@angular2-material/checkbox';
import { MdInputModule } from '@angular2-material/input';
import { MdProgressCircleModule } from '@angular2-material/progress-circle';
import { MdCardModule } from '@angular2-material/card';
import { MdButtonModule } from '@angular2-material/button';
import { MdRadioModule, MdRadioGroup } from '@angular2-material/radio';
import { MdGridListModule } from '@angular2-material/grid-list';
import { MdListModule } from '@angular2-material/list';
import { MdIconModule } from '@angular2-material/icon';
import { MdButtonToggleModule } from '@angular2-material/button-toggle';
import { MdMenuModule } from '@angular2-material/menu';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdTabsModule } from '@angular2-material/tabs';
import { MdSidenavModule } from '@angular2-material/sidenav';
import { MdSliderModule } from '@angular2-material/slider';
import { MdSlideToggleModule } from '@angular2-material/slide-toggle';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdTooltipModule } from '@angular2-material/tooltip';

import { AppComponent } from './app.component';

import { MbuttonToggleComponent } from './mbutton-toggle/mbutton-toggle.component';

import 'style!@angular2-material/core/style/core.css';
import 'style!@angular2-material/core/overlay/overlay.css';

@NgModule({
  declarations: [
    AppComponent,
    MbuttonToggleComponent
  ],
  imports: [
      BrowserModule,
      CommonModule,
      FormsModule,
      MdCoreModule,
      MdCheckboxModule,
      MdInputModule,
      MdProgressCircleModule,
      MdCardModule,
      MdButtonModule,
      MdRadioModule,
      MdGridListModule,
      MdListModule,
      MdIconModule,
      MdButtonToggleModule,
      MdMenuModule,
      MdProgressBarModule,
      MdTabsModule,
      MdSidenavModule,
      MdSliderModule,
      MdSlideToggleModule,
      MdToolbarModule,
      MdTooltipModule
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

The code in the "mbutton-toggle.component.ts" file:

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

@Component({
    moduleId: module.id,
    selector: 'app-mbutton-toggle',
    template: `
        <md-button-toggle-group multiple #testtoggle>
            <md-button-toggle value="one">One1</md-button-toggle>
            <md-button-toggle value="two">Two</md-button-toggle>
            <md-button-toggle value="three" (change)="getInfo(testtoggle)">Three</md-button-toggle>
        </md-button-toggle-group>
    `,
    styleUrls: ['mbutton-toggle.component.css']
})
export class MbuttonToggleComponent implements OnInit {
    constructor() { }
    ngOnInit() {
    }
    getInfo(p){
        console.log(p);
    }
}

When click "Three", the Dom element is printed in the console;

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

I want to get the selected items from the "MdButtonToggleGroup" instance;

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

Angular 2 RC5
Material 2.0.0-alpha.7-4
Win 10
Fire fox 48.0.2

Is there anything else we should know?

No.

[jelbourn]

It's because md-button-toggle-group is a @Directive and not a @Component. Once #1528 is merged, you will be able to do

<md-button-toggle-group #myToggle="mdButtonToggleGroup">

[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.}