I am facing an issue with my Angular-based app where I dynamically populate the page with table rows. There is an app-console element below the page that has a fixed position. Whenever I click the button to add a new row, it overlaps with the app-console. How can I prevent this overlapping?
Below you can find a picture and a snippet of the code.
https://i.sstatic.net/QrAtj.png
**app.component.html**
<div>
<button style="width:100px;" class="btn" (click)="addProduct()" >Add
Product</button>
.... other elements needed for table row ....
</div>
<br>
<app-console [consoleMessages]="consoleMessages"></app-console>
**app.component.ts**
addProduct () {
let product = JSON.parse(JSON.stringify(this.productTemplate));
this.record['products'].push(product);//dynamically adds table row
}
While Angular allows dynamically adding elements, how can I ensure they do not overlap?
Here is an update on this question:
console.component.html
<mat-tab-group class="console">
<mat-tab class="tab" label="Console">
<pre style="height:200px;"><code [innerHtml]="htmlCode"></code></pre>
</mat-tab>
</mat-tab-group>
console.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { highlightAuto } from 'highlight.js';
@Component({
selector: 'app-console',
templateUrl: './console.component.html',
styleUrls: ['./console.component.css']
})
export class ConsoleComponent implements OnInit {
@Input() consoleMessages = '';
consoleHtmlMessages = '';
constructor() { }
ngOnInit() {
}
get htmlCode() {
return highlightAuto(this.consoleMessages, ['html']).value;
}
}