Search code examples
javascriptangulartypescriptcontenteditable

Trigger contenteditable using angular

I'm working on a small administration of tickets. There's a ticket overview and each ticket has an option to enter the "edit mode". Whenever users triggers the edit mode I want the paragraph tag to become contenteditable. However, the angular triggers an error 'contenteditable' is not a known property of 'p', so I'm wondering if there's some walkaround or am I doing something wrong?

The code representation:

<mat-card>
    <mat-card-content>
        <p [contenteditable]="ticket.isEditMode">
            Some text
        </p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button (click)="ticket.isEditMode = !ticket.isEditMode">
            Edit
        </button>
    </mat-card-actions>
</mat-card>
Solution

  • You want to use [attr.contenteditable]. You are accessing the contenteditable attribute on the p tag, not a custom @Input property.

    Here is a working Stackblitz example: https://stackblitz.com/edit/angular-lhrdzh.