i've following situation: i'm create with an api dynamic div for drag and drop.

Drag & Drop works very well. now when i do a double Click i want to change the HTML content of this div. How can i do that in Angular?

in javascript you can use getElementById.innerHTML

But it seems this is not the Angular way.

here is the code: The ID comes from the api - it is all dynamic. on double click i want change the content to another template with more options

UPDATE: component-content

<div
    cdkDropList
    id="docCTN"
    #docCTN="cdkDropList"
    [cdkDropListData]="articles"
    [cdkDropListConnectedTo]="['docarticle']"
    (cdkDropListDropped)="drop($event)"
    (dblclick)="createNewPos()"
>
@for (article of articles; track article) {
    <div cdkDrag id="article.id" (dblclick)="onDblClick(article.id)" [innerHTML]="article">
        <div class="row">
            <div class="col-2 articleText text-center">{{article.count}}</div>
            <div class="col-6 articleTitle">{{article.title}}<br /><span class="ArticleSubTitle">{{article.subtitle}}</span></div>
            <div class="col-2 articlePrice">{{article.price}}</div>
            <div class="col-1 articlePrice">{{article.price}}</div>
            <div class="col-1 articleIcon"><i class="fa-solid fa-trash" (click)="deleteItem($event, article.id)"></i></div>
        </div>
        <div *cdkDragPlaceholder class="articleTitlePlaceholder"></div>
        <div class="articleNewItem"></div>
    </div>
}
</div>

Component-Article

<div class=""
    cdkDropList
    id="docarticle"
    #docarticle="cdkDropList"
    [cdkDropListData]="articles"
    [cdkDropListConnectedTo]="connectedTo"
    (cdkDropListDropped)="drop($event)"
    cdkDragPreviewContainter="parent"
>   
    @for (article of articles; track article) {
    <div class="articleItem" cdkDrag id="article.id">
        <div class="row">
            <div class="col-12 articleTitle">{{article.title}}</div>
            <div class="col-12 articlePrice">CHF {{article.price}}</div>
        </div>
        <div *cdkDragPreview>
            <div class="col-12 articleTitlePreview">{{article.title}}</div>
        </div>
        <div *cdkDragPlaceholder class="articleTitlePlaceholder"></div>
    </div>
    }
</div>

I Drag a Item from the "Component-Article" and Drop to the "Component-Content". When i do a double click on a item in the "Component-Content" i will change the html content. The Idea with the Switch between two fixed templates with dynamic data is also possible.

i can work with the data, but i don't know how to change the html content