Angular2でのフォーカス設定について

Question

###前提・実現したいこと
Angular2において、特定の項目にフォーカスを設定したい。
具体的には「編集開始」ボタンをクリックするとテキストボックスが表示され、そこにフォーカスをあてたい。

###該当のソースコード
component.html

<div *ngIf="isEditing">
   <input type="text" id="txtEditor" placeholder="入力してください" />
</div>
<div *ngIf="!isEditing" (click)="beginEdit()">
   編集開始      
</div>

component.ts

beginEdit(event: any) :void
{
   this.isEditing= true;
   ★ここに「txtEditor」コントロールにフォーカスをセットするコードを記述？
}

Answer 1

<div *ngIf="isEditing"> <input type="text" id="txtEditor" #txtEditor placeholder="入力してください" /> </div> <div *ngIf="!isEditing" (click)="txtEditor.focus()"> 編集開始 </div>

たぶんこれだけでいけます。

Comments

[nekoneko96]

ご回答誠にありがとうございます。
試してみましたが、フォーカスがセットされませんでした。

また「編集開始」をクリックした際「isEditing」のフラグを変更しテキストエディターを表示させたいと思っております。
そのため、下記の2点を網羅できる方法があれば大変助かります。

・beginEdit()関数を実行し「isEditing」フラグを変更する
・txtEditorにフォーカスを設定する。

[timy]

input要素にも #txtEditor を追加してあるんですが適用しました？ わかりづらくてすみません。
なるべくフォームのことはテンプレート側で完結させたほうがハマりにくくていいと思うんですが、

<div *ngIf="!isEditing" (click)="beginEdit(txtEditor )">

とした上で

beginEdit(txtEditor: any) :void
{
this.isEditing= true;
txtEditor.focus();
}

もっといいやり方があるかもしれませんが、手元で試してみた感じ動いてはいます。

[nekoneko96]

追記誠にありがとうございます。
ご教授頂いた方法で再度確認してみました。
結果としてはtxtEditorがngIfの内部にあり、「isEditing」のフラグが立つまで描画されないため、
(click)="beginEdit(txtEditor)"で引数で渡しているtxtEditorがundefinedとなってしまいます。
※txtEditorをngIfの外に出して常に描画される形にすると正常にフォーカスがセットされます。