Disabled element by given id - typescript angular

Question

I need yours help. It is possible when a have list of comments as textareas and i would like to disabled single element (comment) by given this element id. Whati have:

<div style="float: right">
    <button mat-button color="primary">
        <mat-icon class="md-24" (click)="edit()" >edit</mat-icon>
    </button>
     <textarea [disabled]='enableTextarea' class="comment-textarea" matInput cdkTextareaAutosize rows="2">{{comment.content}}</textarea>       
</div>

{{coment.content}} - is content of the comment and it is it what i want to edit (it means enable)

export class CommentComponent implements OnInit {

enableTextarea = true;

edit() {
    this.enableTextarea = !this.enableTextarea;
  }

}

Here i have two coments with id 1 and 2, and what he wants to achieve to be able to after click edit (pencil on right) disable single comments. In my code all comments are edited, no matter who clicks.

If you want to disable only one of n elements, each element needs its own variable to control the state — Taplar
– Taplar, Commented Feb 8, 2021 at 23:49
@mwilson It's a straight forward issue. They are driving the disabled state of all elements off of a component level variable, enableTextarea, that is not unique to each element. They want uniqueness. So they can't make them all use that one variable — Taplar
– Taplar, Commented Feb 8, 2021 at 23:53
Actually, could you show the code that makes your loop over all the contents? The one containing the *ngFor in all likelihood. — somethinghere
– somethinghere, Commented Feb 8, 2021 at 23:54
From your code I can conclude that you are not looping over data. Since you initialise only one single component, the fact that this property seems to be 'shared' is exactly that: the same boolean holds the same value, because its the same object. There is no *ngFor anywhere, which would loop over an array of comments to display, given each of them that boolean value. I can't say it easier than that. @Taplar Probably hit the nail on the head better. — somethinghere
– somethinghere, Commented Feb 9, 2021 at 5:33

Owen Kelvin · Accepted Answer · 2021-02-09 04:46:33Z

You need to change enableTextarea from boolean to boolean[]. That way each item will be independent of the other

In your component


enableTextarea = [false];

edit(i) {
  this.enableTextarea[i] = !this.enableTextarea[i];
}

Now in your html,

Change the loop by adding index

    <div *ngFor="let comment of comments; let i = index">

       <!-- Other Contents Here -->
    </div>

change all enableTextarea to enableTextarea[i]
Change edit() to edit(i)

                <div *ngFor="let comment of comments; let i = index">
                    <div>
                        {{comment.createDate }}
                        <div style="float: right">
                            <button mat-button color="primary" (click)="deleteComment(comment.id)">
                <mat-icon class="md-24">delete</mat-icon>
              </button>
                            <button mat-button color="primary">
                <mat-icon class="md-24" (click)="edit(i)">edit</mat-icon>
              </button>
                        </div>
                    </div>
                    <div *ngIf="enableTextarea[i] == false">
                        <h5 class="h5-edited">editing</h5>
                    </div>
                    <textarea [disabled]='enableTextarea[i]' class="comment-textarea" matInput cdkTextareaAutosize
                    rows="2">{{comment.content}}</textarea>
                    <button mat-button color="primary" *ngIf="enableTextarea[i] == false" (click)="updateComment(comment.id)">Save
          </button>
                    <br><br><br>
        </div>

See Demo Here

Collectives™ on Stack Overflow

Disabled element by given id - typescript angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related