How do i focus on a element inside a component inside a ngIf at any time?

Question

I want to focus on a specific element using Angular2.

The app contains a list of items that can be selected or created. When an item is selected or created a corresponding function is called in the parent component and the correct data is loaded asynchronously (using jQuery) into a model that is backing a form .

newValue(){
    this.valueSelected = true;

    //do something to focus here

    //complex asynchronous item creation code acquiring a template from the database
}

selectValue(val: Value) {
    this.dialog.conditionallyShowDialog(this.hasChanges(), "The item is edited, are you sure you want to change item.", "Warning!").subscribe(confirm => {
        if (confirm) {
            this.valueSelected = true;

            //do something to focus here

            //complex asynchronous loading code involving the database
        });
}

The form is hidden inside a ngif and may or may not exist at this point depending on if an item is already selected or not.

<form id="app-form" *ngIf="valueSelected">
        <!--Short text input field-->
        <input-component #firstInForm preText="first text" [isDisabled]="!selectedValue.internalyInitialized"
                         inputId="form-first-text" placeholder="first text" [(text)]="selectedValue.firstText"
                         [validator]="firstTextValidator" (validateCallback)="validate($event)"></input-component>
        <!--Long text input field-->
        <input-component preText="other text" [useTextArea]="true" [isDisabled]="!selectedValue.internalyInitialized"
                         inputId="form-other-text" placeholder="other" [(text)]="selectedValue.otherText"
                         [validator]="otherTextValidator" (validateCallback)="validate($event)"></input-component>

        .....

</form>

The form contain InputComponents that contain a text area or input field

        <input #inputRef *ngIf="!useTextArea" id="{{inputId}}" autocomplete="off" [disabled]="isDisabled" (keyup)="localChange($event)" [ngModelOptions]="{standalone:true}" [(ngModel)]="text" name="{{preText}}" 
        type="text" class="input-format" [ngStyle]="{'text-transform': textTransform}" placeholder="{{placeholder}}" [readonly]="isReadOnly()" />

        <textarea #textRef *ngIf="useTextArea" id="{{inputId}}" (keyup)="localChange($event)" [ngModelOptions]="{standalone:true}" [(ngModel)]="text" name="{{preText}}" 
        class="input-format" [ngStyle]="{'text-transform': textTransform}" placeholder="{{placeholder}}" [disabled]="isDisabled" [readonly]="isReadOnly()"></textarea>

I want to focus on the correct input in the first InputComponents when a new item is selected or created.

I have found several ways to focus on an input but none appear to work in this situation. see:

Angular 2: Focus on newly added input element

Angular2 - Focusing a textbox on component load