title: Angular 2+ initialize value of input
body: <p>I am trying to implement a Component which corresponds to a Bootstrap modal including an input. The input is hooked to a variable in the Component class via <code>[(ngModel)]="..."</code> This works if I enter text inside the input (the variable's value gets updated). </p>
  
  <p>What I want to do is that when this component's <code>show()</code> method gets called the input should be populated with text passed in as a parameter. This does not seem to work and I can't figure out how I can set the initial text passed in as a parameter (without using jQuery). </p>
  
  <p>Here's the relevant code:</p>
  
  <p><code>editdialog.component.html</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="edit_todo_modal" class="modal"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title"&gt;Edit todo&lt;/h5&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Editing todo: {{currentText}}&lt;/p&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;!-- THIS IS WHERE I WANT THE INITAL TEXT --&gt;
              &lt;input id="edit-todo-modal-input" type="text" class="form-control" [(ngModel)]="currentText"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>editdialog.component.ts</code></p>
  
  <pre class="lang-typescript prettyprint-override"><code>import { Component } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { ListComponent } from './list.component';
  import { Injectable } from '@angular/core';
  
  declare var jQuery : any;
  
  @Injectable()
  @Component({
    selector: 'edit-todo-dialog',
    templateUrl: './editdialog.component.html',
    styleUrls: ['./editdialog.component.css']
  })
  export class EditTodoDialogComponent{
  
    currentText: string = "";
    index: number;
  
  
    /* I want to use this method to set the initial value */
    show(index: number, text: string): void {
      this.currentText = text;
      this.index = index;
  
      jQuery("#edit-todo-modal-input").val(this.currentText); // I don't want to use jQuery for showing the initial value, however this works
      jQuery("#edit_todo_modal").modal(); // show bootstrap modal
    }
  }
  </code></pre>
  
  <p>Thanks in advance.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The <code>show()</code>method gets called from this component</p>
  
  <pre class="lang-typescript prettyprint-override"><code>import { Component } from '@angular/core';
  import { ListService } from './list.service';
  import { OnInit } from '@angular/core';
  import { EditTodoDialogComponent } from './editdialog.component';
  
  /**
   * The main todo list component
   */
  
  @Component({
    selector: 'list-component',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css'],
    providers: [ListService, EditTodoDialogComponent]
  })
  export class ListComponent implements OnInit {
  
    private listService: ListService;
    private editTodoDialog: EditTodoDialogComponent;
    /* ... */
  
  
    constructor(listService: ListService, editTodoDialog: EditTodoDialogComponent) {
      this.listService = listService;
      this.editTodoDialog = editTodoDialog;
    }
  
    ngOnInit(): void {
      this.getTodos();
    }
  
    /* ... */
  
    // TO BE IMPLEMENTED
  
    showEditTodoDialog(index: number) : void {
      this.editTodoDialog.show(index, this.todos[index]);
    }
  }
  </code></pre>
  
  <p>The event is hooked like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li class="list-group-item" *ngFor="let todo of todos; let i = index"&gt;
          &lt;div class="todo-content"&gt;
            &lt;p class="todo-text" (dblclick)="showEditTodoDialog(i)"&gt;
              {{todo}}
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="todo-close"&gt;
            &lt;button (click)="removeTodo(i)" class="btn btn-danger btn-sm"&gt;
                &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
              &lt;/button&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  </code></pre>