Table Input Focus example

HTML

<script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
<script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/core.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/common.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
<script src="https://unpkg.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
<my-app></my-app>

TypeScript

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
  	 <table>
      <thead>
        <th>Rank</th>
        <th>Name</th>
      </thead>
      <tbody>
        <tr *ngFor="let entity of entities">
          <td>
            <input class="myC" *ngIf='entity === currentEntity' 
            				value="{{entity.Rank}}" 
                    type="number" 
                    min="1"
                    max="{{entities.length}}"
                    (change)="updateRank(entity, $event)">
            <span *ngIf='entity !== currentEntity'>{{entity.Rank}}</span>
          </td>
          <td>
            <span>{{entity.Name}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  `,
})
class HomeComponent {
		entities = [
    	{
      	Rank: 4,
        Name: "Four"
      },
      {
      	Rank: 3,
        Name: "Three"
      },
      {
      	Rank: 2,
        Name: "Two"
      }, 
    	{
      	Rank: 1,
        Name: "One"
      },     
    ]
    
    currentEntity;
    
    ngOnInit() {
    	this.currentEntity = this.entities[0];
    }
    
    updateRank(entity, event) {
    	console.log('startupdate');
    	var newRank = parseInt(event.target.value);
		
    	// Adjust for < 1 or > max
      if (newRank < 1) {
        newRank = 1;
      }
      else if (newRank > this.entities.length) {
        newRank = this.entities.length;
      }
      
      let entityCurrentlyInNewPosition;
      for (var i = 0; i < this.entities.length; i++) {
      	if (this.entities[i].Rank === newRank) {
        	entityCurrentlyInNewPosition = this.entities[i];
          break;
        }
      }
      
      const currentIndex = this.entities.indexOf(entity);
      const newIndex = this.entities.indexOf(entityCurrentlyInNewPosition);
      
      this.arrayMove(this.entities, currentIndex, newIndex);
       
      for (var i = 0; i < this.entities.length; i++) {
      	this.entities[i].Rank = this.entities.length - i;
      }
      debugger;
    ...