Trigger contenteditable using angular

Question

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>

vince · Accepted Answer · 2018-01-28 23:23:39Z

1

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.

answered Jan 28, 2018 at 23:23

vince

8,3463 gold badges39 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dawid Zbiński Over a year ago

Thanks for the answer. Will mark it as correct in 3mins.

Collectives™ on Stack Overflow

Trigger contenteditable using angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related