When I click to start editing, a component is called for the editing process. In this component, I am unable to click on anything and the background turns black, which is okay. However, I would like for each ID that I select to edit to become active with a white background or z-index.
This is my HTML
<div class="name-block" [ngClass]="'name-block-width-' + valueItem.level"
[ngClass]="{active: activeSelected === valueItem.id, 'name-block': true}" (click)="toggleExpand()">
</div>
This is the CSS
.name-block {
@extend %common-block;
@include center(false, true);
@include justify-content(space-between);
margin-left: 1px;
padding-left: 10px;
&.active {
z-index: 950;
}
div.businessId {
@extend %flexbox;
@include center(false, true);
border-left: solid thin $border-color;
padding: 0 5px;
height: 100%;
}
}
@for $i from 1 through 7 {
.name-block-width-#{$i} {
width: 500px - (($i - 1) * 50px);
}
}
And this is the TypeScript code when attempting to edit
edit(editOptions: EditViOptions) {
this.showChild = !this.showChild;
if (editOptions.valueItem || editOptions.appendToParentId) {
this.dataToPass = editOptions;
this.activeSelected = editOptions.valueItem.id;
} else {
this.activeSelected = null;
}
}