import { Component , AfterViewInit , ViewChild , ElementRef } from '@angular/core' ; import { UserService } from '../core' ; @ Component ( { selector : 'nickname' , styleUrls : [ './nickname.component.scss' ] , templateUrl : './nickname.component.html' } ) export class NicknameComponent implements AfterViewInit { @ ViewChild ( 'focus' ) private focus : ElementRef ; nickname : string ; constructor ( public userService ) { this . nickname = userService . nickname ; } ngAfterViewInit ( ) { this . focus . nativeElement . focus ( ) ; } save ( ) { this . userService . nickname = this . nickname ; } eventHandler ( event ) { if ( event . key === 'Enter' ) { this . save ( ) ; } } }