Cómo Cambiar el innerHTML de un DIV Dinámico en Angular 19

En el desarrollo de aplicaciones web, la interactividad es clave. Con Angular, puedes crear componentes dinámicos que permiten a los usuarios interactuar de manera efectiva. En este artículo, exploraremos cómo cambiar el contenido HTML de un div dinámico utilizando Angular 19, específicamente en un escenario de arrastrar y soltar (drag and drop).

Comprendiendo el Problema

Imagina que tienes un componente que muestra una lista de artículos. Cada artículo puede ser arrastrado y soltado en un contenedor diferente. Al hacer doble clic en un artículo dentro del contenedor, deseas cambiar su contenido HTML para mostrar más opciones o detalles.

Código de Ejemplo

Entendamos mejor con un ejemplo de código. Aquí tienes la estructura básica de los componentes de contenido y artículo:

Componente de Contenido

<div
    cdkDropList
    id="docCTN"
    #docCTN="cdkDropList"
    [cdkDropListData]="articles"
    [cdkDropListConnectedTo]="['docarticle']"
    (cdkDropListDropped)="drop($event)"
    (dblclick)="createNewPos()"
>
    <div *ngFor="let article of articles; trackBy: trackById">
        <div cdkDrag id="{{article.id}}" (dblclick)="onDblClick(article)" [innerHTML]="getArticleContent(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 articleIcon"><i class="fa-solid fa-trash" (click)="deleteItem($event, article.id)"></i></div>
            </div>
        </div>
    </div>
</div>

Componente de Artículo

<div
    cdkDropList
    id="docarticle"
    #docarticle="cdkDropList"
    [cdkDropListData]="articles"
    [cdkDropListConnectedTo]="connectedTo"
    (cdkDropListDropped)="drop($event)"
>
    <div *ngFor="let article of articles; trackBy: trackById">
        <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>
    </div>
</div>

Implementando el Cambio de Contenido

Para cambiar el contenido HTML de un artículo al hacer doble clic, puedes definir un método en tu componente de TypeScript. Este método se encargará de actualizar el contenido del artículo.

Método en el Componente

onDblClick(article): void {
    // Aquí podrías definir la lógica para obtener un nuevo contenido
    article.additionalContent = "<p>Nueva información sobre el artículo.</p>";
}

getArticleContent(article): string {
    return article.additionalContent || "<p>Contenido por defecto</p>";
}

En este ejemplo, cuando se hace doble clic en un artículo, el método onDblClick se ejecuta y cambia el contenido a uno nuevo. El contenido se almacena en la propiedad additionalContent del artículo.

Conclusión

Cambiar el innerHTML de un div dinámico en Angular no es tan directo como en JavaScript puro, pero es perfectamente alcanzable utilizando las herramientas y prácticas adecuadas de Angular. Con un enfoque basado en componentes y el uso de propiedades y métodos, puedes crear aplicaciones interactivas que respondan a las acciones del usuario de forma eficiente. Recuerda siempre seguir las buenas prácticas de Angular para mantener tu código limpio y mantenible. ¡Feliz codificación!