innerHTML doesn't work with app-component in Angular 12 - html

Question

i want to put dynamically components like div and textArea into a div with innerHTML but it doesn't work
imaginarium is the parent component where i'd like to show the draggable component
imaginarium.html
<div *ngIf="shape == true">
<div>
<table>
<tr>
<td><button (click)='update()'>box</button></td>
</tr>
<tr>
<td><button (click)='update()'>editeur de texte</button></td>
</tr>
</table>
</div>
<div class="box-container" [innerHTML]="trustedURL"></div>
</div>
i give you all the necessary code to test yourself
imaginarium.scss
.box-container {
position: absolute;
width: 80%;
height: 90%;
outline: 1px solid black;
transform: translate3d(-100%, -100%);
}
imaginarium.ts
import { DomSanitizer } from '#angular/platform-browser';
trustedURL : any;
constructor(
public sanitizer: DomSanitizer
) {
}
update(){
this.trustedURL = this.sanitizer.bypassSecurityTrustHtml(`<app-resizable-draggable [width]='100' [height]='150' [left]='100' [top]='100' ></app-resizable-draggable>`);
}
this is this child component
resizable-draggable.html
<ul #menu (mouseleave)="resetMenu()"></ul>
<div #box class="resizable-draggable"
[style.width.px]="width"
[style.height.px]="height"
[style.transform]="'translate3d('+ left + 'px,' + top + 'px,' + '0px)'"
[class.active]="status === 1 || status === 2"
(mousedown)="setStatus($event, 2)"
(window:mouseup)="setStatus($event, 0)"
(contextmenu)="Menu()"
>
<div class="resize-action" (mousedown)="setStatus($event, 1)"></div>
</div>
with CSS
resizable-draggable.scss
.resizable-draggable {
outline: 1px solid black;
&.active {
outline-style: solid;
background-color: #80ff800d;
}
&:hover {
cursor: all-scroll;
}
}
.resize-action {
position: absolute;
left: 100%;
top: 100%;
transform: translate3d(-50%, -50%, 0) rotateZ(45deg);
border-style: solid;
border-width: 8px;
border-color: transparent transparent transparent #1100ff;
&:hover, &:active {
cursor: nwse-resize;
}
}
and the .ts
resizable-draggable.ts
import { Component, OnInit, Input, ViewChild, ElementRef, AfterViewInit, HostListener } from '#angular/core';
const enum Status {
OFF = 0,
RESIZE = 1,
MOVE = 2
}
#Component({
selector: 'app-resizable-draggable',
templateUrl: './resizable-draggable.component.html',
styleUrls: ['./resizable-draggable.component.scss']
})
export class ResizableDraggableComponent implements OnInit, AfterViewInit {
#Input('width') public width!: number;
#Input('height') public height!: number;
#Input('left') public left!: number;
#Input('top') public top!: number;
#ViewChild("box") public box!: ElementRef;
#ViewChild('menu', {static: false}) menuChild! : ElementRef;
private boxPosition!: { left: number, top: number };
private containerPos!: { left: number, top: number, right: number, bottom: number };
public mouse!: {x: number, y: number}
public status: Status = Status.OFF;
private mouseClick!: {x: number, y: number, left: number, top: number}
ngOnInit() {}
ngAfterViewInit(){
this.loadBox();
this.loadContainer();
}
private loadBox(){
const {left, top} = this.box.nativeElement.getBoundingClientRect();
this.boxPosition = {left, top};
}
private loadContainer(){
const left = this.boxPosition.left - this.left;
const top = this.boxPosition.top - this.top;
const right = left + window.screen.width -395;
const bottom = top + window.screen.height- 240;
this.containerPos = { left, top, right, bottom };
}
setStatus(event: MouseEvent, status: number){
if(status === 1) event.stopPropagation();
else if(status === 2) this.mouseClick = { x: event.clientX, y: event.clientY, left: this.left, top: this.top };
else this.loadBox();
this.status = status;
}
#HostListener('window:mousemove', ['$event'])
onMouseMove(event: MouseEvent){
this.mouse = { x: event.clientX, y: event.clientY };
if(this.status === Status.RESIZE) this.resize();
else if(this.status === Status.MOVE) this.move();
}
private resize(){
if(this.resizeCondMeet()){
this.width = Number(this.mouse.x > this.boxPosition.left) ? this.mouse.x - this.boxPosition.left : 0;
this.height = Number(this.mouse.y > this.boxPosition.top) ? this.mouse.y - this.boxPosition.top : 0;
}
}
private resizeCondMeet(){
return (this.mouse.x < this.containerPos.right && this.mouse.y < this.containerPos.bottom);
}
private move(){
if(this.moveCondMeet()){
this.left = this.mouseClick.left + (this.mouse.x - this.mouseClick.x);
this.top = this.mouseClick.top + (this.mouse.y - this.mouseClick.y);
}
}
private moveCondMeet(){
const offsetLeft = this.mouseClick.x - this.boxPosition.left;
const offsetRight = this.width - offsetLeft;
const offsetTop = this.mouseClick.y - this.boxPosition.top;
const offsetBottom = this.height - offsetTop;
return (
this.mouse.x > this.containerPos.left + offsetLeft &&
this.mouse.x < this.containerPos.right - offsetRight &&
this.mouse.y > this.containerPos.top + offsetTop &&
this.mouse.y < this.containerPos.bottom - offsetBottom
);
}
Menu(){
this.menuChild.nativeElement.innerHTML = `
<li><button>Actions</button></li>
<li><button>Actions</button></li>
<li><button>Actions</button></li>
<li><button>Actions</button></li>
<li><button>Actions</button></li>
`;
return false;
}
resetMenu(){
this.menuChild.nativeElement.innerHTML = ``;
}
}
have you got an idea to show the component ?
thanks

Answer 1

I've searched and I found something helpful :
https://dzone.com/articles/how-to-dynamically-create-a-component-in-angular
it's permit to add angular components into html