Untitled

<div class="bcmBodyContainer">
    <div id="rightDiv" class="span">
        <div class="bcmBlueDivBorder">
            <div class="arrow">
                <div>
                    <span>{{arrowText}}</span>
                </div>
            </div>

            <select class="selectBox" [(ngModel)]="selectedvalue" (ngModelChange)="getList()">
                <option value="">Select</option>
                <option *ngFor="let a of assetlist" (click)="getList(a.lookUpID)">{{a.lookUpName}}</option>
            </select>

            <br />
            <a *ngIf="selectedvalue" (click)="editButton()" class="editLink">Edit</a>

            <div *ngIf="selectedvalue" class="bcmBlueDivBorder contentContainer">
                <span class="headerText">Asset</span>

                <div *ngIf="!isEditing" class="scrollContainer">
                    <div *ngFor="let name of dep; let i = index; trackBy: trackByFunction">
                        <input [(ngModel)]="name.lookUpName" [disabled]="!isEditing" type="text"
                            keypress="blockSpecialChar($event)" (input)="textLengthCounter(i)" maxlength="100">
                        <span>{{name.lookUpName.length}} of 100</span>
                        <button [disabled]="!isEditing" (click)="deleteFunctionName(i)"></button>
                    </div>
                </div>

                <div *ngIf="isEditing" class="scrollContainer">
                    <!-- Add new item -->
                    <input *ngIf="newLookupNameAdded" [(ngModel)]="newlookUpName" type="text"
                        (input)="onInput($event)" keypress="blockSpecialChar($event)" maxlength="100">
                    <span *ngIf="newLookupNameAdded">{{newlookUpName.length}} of 100</span>
                    <button *ngIf="(showAddButtonWhileTyping || showAddButton) && (newLookupNameAdded && showAddButtonWhileTyping)"
                        (click)="addFunctionName()">
                        <img src="assets/add.png" alt="Add" />
                    </button>

                    <!-- Add button for existing items -->
                    <button *ngIf="(showAddButtonWhileTyping || showAddButton) && !newLookupNameAdded"
                        (click)="addFunctionName()">
                        <img src="assets/add.png" alt="Add" />
                    </button>

                    <!-- Existing items -->
                    <div *ngFor="let name of dep; let i = index; trackBy: trackByFunction">
                        <input [(ngModel)]="name.lookUpName" type="text" keypress="blockSpecialChar($event)"
                            (input)="updateOldLookupName(name.lookUpID, name.lookUpName)" maxlength="100">
                        <span>{{name.lookUpName.length}} of 100</span>
                        <button *ngIf="name.lookUpID === 0" (click)="deleteFunctionName(i)">
                            <img src="assets/delete_red.png" alt="Delete" />
                        </button>
                    </div>
                </div>
            </div>

            <div *ngIf="isEditing" class="submitContainer">
                <button type="submit" class="submitButton" (click)="warningPopup()">Submit</button>
                <a class="bcmLink" (click)="cancel()">Cancel</a>
            </div>
        </div>
    </div>
</div>

<div *ngIf="showPopup" class="modal-content">
    <div class="modal-header">
        <b>Warning</b>
        <button type="button" class="closeClass" data-dismiss="modal" (click)="cancelpopUp()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <span>Data once Submitted cannot be Deleted.</span>
        <span>Do you want to continue?</span><br><br>
        <span>
            <button type="submit" class="submitButton" (click)="submit()">Yes</button>
            <button style="margin-left: 20px" type="submit" class="submitButton" (click)="cancelpopUp()">No</button>
        </span>
    </div>
</div>