Make last item of list editable on creation

Question

I have this list that I scroll to the bottom when I create a new entry for the listing array. I need that isLast entry to be editable like when you create a new folder in windows (the text appears blue and if the user types it replaces the default text)

This is my html

<div id="modalnewfilelistingid" class="listing">
    <ul class="line">
        <li *ngFor="let i of listing; let idx = index; let isLast = last" class="company"
            (click)="selectedLine($event, idx)" (dblclick)="doubleClicks($event, idx)"
            [ngClass]="{'selected': idx == selectedItem}"
            [ngClass]="{'lastAdded': isLast && isProjects && newProjectEntry}" id="listing">
            <fa-icon [ngClass]="{'lastAddedIcon': isLast && isProjects && newProjectEntry}" class="li-icon arrow"
                [icon]="['fas', 'chevron-right']"></fa-icon>
            <fa-icon [ngClass]="{'lastAddedIcon': isLast && isProjects && newProjectEntry}" class="li-icon"
                [icon]="['fas', 'folder-open']"></fa-icon>
            <div class="values">
                <div *ngIf="!isProjects"
                    class="name" id="newProjectName" name="newProjectName">{{i.name}}</div>
                <div *ngIf="isProjects"
                    class="name" contenteditable="true" (keydown.enter)="onEnter($event, idx, i.name)">
                    <input type="text" matInput [formControl]="formControl" placeholder="{{i.name}}" spellcheck="false">
                </div>
                <div *ngIf="!isSearches" class="counts">{{i.countChild}}</div>
                <div *ngIf="isSearches" class="counts">-</div>
            </div>
        </li>
    </ul>
</div>

This is what I'm using for clicks in the list (it is only editable on doubleclick and saved on enter)

 selectedLine(evt, idx) {
    this.preventSingleClick = false;
    const delay = 200;

    this.timer = setTimeout(() => {
      if (!this.preventSingleClick) {
        // Navigate on single click        
        this.selectedItem = idx;
        this.onLineClick.emit({ idx });
      }
    }, delay);
  }

  doubleClicks(event, idx) {
    if (this.isProjects) {
      this.preventSingleClick = true;
      clearTimeout(this.timer);
    }
  }

  onEnter(event, idx, model) {
    if (this.isProjects) {
      event.preventDefault();
      // Update proj name on enter if name isn't empty
      if (event.target.innerText != '' || this.formControl.value != '') {
        this.selectedItem = idx;
        this.toUpdate = true;
        this.onEnterClick.emit({ toUpdate: this.toUpdate, newProjectName: this.formControl.value });
      }
    }
  }

This is what I'm using to get the list to scroll to bottom

setTimeout(() => {
      var parentScroll = document.getElementsByClassName('file-listing ng-star-inserted')[0];
      document.getElementsByClassName('file-listing ng-star-inserted')[0].scrollTo({ top: parentScroll.scrollHeight });
    }, 100); 

I also have this variable to know if there was an item added to the list or not

@Input() newProjectEntry: boolean = false;