ELementRef nativeElement undefined

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

ElementRef.nativeElement undefined

Expected behavior

It shows the nativeElement

Minimal reproduction of the problem with instructions

@Component({

    template: `
<div style="position: absolute;">
    <md-icon color="accent" #elementIcon>{{ options.icon }}</md-icon>
    <span class="message" [innerHTML]="message | coryHtml"></span>
</div>
    <a md-button color="accent" #elementButton class="cory-mat-notify-button" (click)="ref.dismiss()">{{ this.i18n.title.ok }}</a>    

`,

    styles: [`
        .message {
            position: relative;
            top: -7px;we
        }
        
        [md-button]{         
            position: absolute;
            top: 8px;
            right: 4px;
            min-width: auto !important;
        }
`],
})
@Injectable()
export class NotifyComponent implements OnInit {

    @ViewChild('elementButton') elementButton : ElementRef;
    @ViewChild('elementIcon') elementIcon : ElementRef;

    inited: boolean = false;

    message: string;
    options: NotifyOptions;
    i18n: any;
    ref: MdSnackBarRef<NotifyComponent>;

    constructor(
        private locale: LocaleService
    ) {
        this.locale.subscribe((subject : LocaleSubject) => {
            this.i18n = subject.locale.data.material;
        });
    }

    ngOnInit() {
        if (!this.inited) {
            console.log(this.elementButton.nativeElement)
            console.log(this.elementIcon.nativeElement)
        }
//        const buttonColor = window.getComputedStyle(this.button.elementRef.nativeElement).getPropertyValue('color');
//        const iconStyle = window.getComputedStyle(this.icon.elementRef.nativeElement);

//        console.log(this.button.nativeElement)
//        console.log(iconStyle)
    }
}

What is the motivation / use case for changing the behavior?

works

Please tell us about your environment:

windows/linux

• Angular version: 2.0.X

4.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

firefox, chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TS

• Node (for AoT issues): node --version =
  any

No matter what I do, it is always undefined (any lifecycle)

[ericmartinezr]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem still persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

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