So I have the following structure:
<div *ngIf="condition" #div1>
<div>
<span>foo</span>
</div>
</div>
<div *ngIf="condition" #div2> <!-- Hidden at first-->
<div>
<span>bar</span>
</div>
</div>
<div *ngIf="condition" #div3>
<div>
<span>fooBar</span>
</div>
</div>
So, when I select an option from a mat-select to display the div2 it renders after the div3. Is there a way to make it render in its position (after div1 but before div3) using Angular 8?
EDIT: So I re-checked the code without any attribute and in fact works as you mention. The project that I'm working on it opens a window (inside the browser )with a toolbar with 2 buttons, one to shrink the window (inner window not the browser) and another one to expand it. My boss made a directive to order the UI elements based on the inner window size using css-grid, so when I use the ngIf with that directive it renders the #div2 at the end and not at the right position.
Directive:
redimensionElementos() {
this.dispositivo();
const elements = this.el.nativeElement.querySelectorAll('div');
// const salto: Boolean = false;
const celdas: any[] = [];
elements.forEach(element => {
const lst: Number[] = JSON.parse(element.getAttribute('someattribute'));
if (lst) {
const celdaNum = lst[this.disp];
if (celdaNum > 0 && celdaNum <= this.colum) {
celdas.push([celdaNum, null]);
}
}
});
let fila = 0;
const total: any[] = [];
const col = 12;
let casillas: any[];
let pos = 0;
do {
if (!casillas) {
casillas = [];
}
if ((casillas.length + celdas[pos][0]) <= col) {
// console.log(pos + ' -- ' + celdas[pos][0]);
for (let i = 0; i < celdas[pos][0]; i++) {
casillas.push('pos' + pos + 'fil' + fila + 'c' + celdas[pos][0] + 's');
celdas[pos][1] = 'pos' + pos + 'fil' + fila + 'c' + celdas[pos][0] + 's';
}
total[fila] = casillas;
} else {
pos--;
casillas = null;
fila++;
}
pos++;
} while (pos < celdas.length);
for (let i = 0; i < total.length; i++) {
const agregar = col - total[i].length;
if (agregar > 0) {
for (let j = 0; j < agregar; j++) {
total[i].push('vacio' + i);
}
}
}
let areas = '';
for (let i = 0; i < total.length; i++) {
areas += '\'';
for (let j = 0; j < total[i].length; j++) {
areas += total[i][j] + ' ';
}
areas += '\' \n';
}
let pos1 = 0;
elements.forEach(element => {
const lst: Number[] = JSON.parse(element.getAttribute('someattribute'));
if (lst) {
const celdaNum = lst[this.disp];
if (celdaNum > 0 && celdaNum <= this.colum) {
this.renderer.setElementStyle(element, 'grid-area', celdas[pos1][1] + '');
pos1++;
}
}
});
this.renderer.setElementStyle(this.el.nativeElement, 'display', 'grid');
this.renderer.setElementStyle(this.el.nativeElement, 'grid-template-areas', areas);
}
dispositivo() {
this.ancho = this.el.nativeElement.offsetWidth;
if (this.ancho < UtilSuma.MOBIL) {
this.disp = 0;
} else if (this.ancho < UtilSuma.TABLET) {
this.disp = 1;
} else {
this.disp = 2;
}
}
}
html of my component:
<div appGrupo [colum]="12" style="margin: 10px">
<!-- CHECKBOXES TIPO DE PERSONA-->
<div someattribute="[12,12,12]">
<label class="example-margin">Tipo de Persona:</label>
<mat-checkbox class="chk-margin" [(ngModel)]="bCliente" name="cliente" (change)="onCheckValidation($event)">Cliente
</mat-checkbox>
<mat-checkbox class="chk-margin" [(ngModel)]="bProveedor" name="proveedor" (change)="onCheckValidation($event)">
Proveedor
</mat-checkbox>
<mat-checkbox class=" chk-margin" [(ngModel)]="bEmpTransporte" name="transportista"
(change)="onCheckValidation($event)">
Emp. Transporte
</mat-checkbox>
</div>
<div someattribute=" [12,6,2]">
<mat-form-field style="width: 95%">
<mat-label>Tipo de documento</mat-label>
<!-- <mat-select (selectionChange)="selecDocType($event.value)" name="c1"> -->
<mat-select name="c1" [(ngModel)]="selected">
<!-- <mat-option *ngFor="let bean of lstTipos" [value]="beanTipo">
{{bean.data1}}
</mat-option> -->
<mat-option *ngFor="let item of lstTipos" [value]="item">
{{item.nombreCorto}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div someattribute="[12,6,2]" *ngIf="selected.nombreCorto !== 'SIN DOCUMENTO'">
<mat-form-field>
<input matInput placeholder="N° Documento" type="text">
<mat-error></mat-error>
</mat-form-field>
</div>
<div someattribute="[12,6,4]" *ngIf="selected.nombreCorto === 'RUC'">
<mat-form-field>
<input matInput placeholder="Razón social" type="text">
<mat-error></mat-error>
</mat-form-field>
</div>
<div someattribute="[12,6,2]">
<mat-form-field>
<input matInput placeholder="Nombres" type="text">
<mat-error></mat-error>
</mat-form-field>
</div>
<div someattribute="[12,6,2]">
<mat-form-field>
<input matInput placeholder="Apellido" type="text">
<mat-error></mat-error>
</mat-form-field>
</div>
<div someattribute="[12,6,2]">
<mat-form-field>
<input matInput placeholder="Correo" type="text">
<mat-error></mat-error>
</mat-form-field>
</div>
<div someattribute="[12,6,2]" *ngIf="selected.nombreCorto === 'RUC'">
<mat-form-field>
<input matInput placeholder="Giro de negocio" type="text">
<mat-error></mat-error>
</mat-form-field>
</div>
<div someattribute="[1,6,2]">
<button mat-flat-button="primary" style="text-transform: uppercase;" color="primary">
<mat-icon>save</mat-icon>
</button>
</div>
</div>
