Toggle disabled attribute to a specific element id in Angular 8

I want to create a dashboard that creates cards based on an array , which you can edit and delete. However i cant figure out how to disable or enable the fields that belong to a specific card. I tried using id but the attribute disabled is read-only .How can i do i accomplish the behavior i described?

Below is the code i have tried to use

HTML:

<ng-container *ngFor="let caso of tarea">
 <div class="card shadow-box">
                            <div class="card-header bg-danger"> 
                                <div class="row">
                                    <h4 style="color: black;"  class="card-title col-8">Caso : {{caso.nombre}}</h4>
                                    <button type="button" class="btn btn-info mr-2 mb-3" (click)="toogleEdit(caso._id)"><i class="fa fa-pencil-square-o"></i></button>
                                    <button type="button" class="btn btn-danger mr-2 mb-3" (click)="removerCaso(caso._id)"><i class="fa fa-trash"></i></button>
                                </div>
                            </div>
                            <div class="card-body bg-yellow">
                                <h3 style="color: black;" class="text-capitalize"> Cliente : {{caso.cliente}}</h3>
                                    
                                        <label style="color: black;"  for="tema-{{caso._id}}">Tema : </label>
                                        <input  style="color: black;" [attr.disabled]="true" type="text" id="tema-{{caso._id}}" value="{{caso.tema}}">
                                        <br>
                                        <label style="color: black;" for="desc-{{caso._id}}">Descripcion : </label>
                                         <textarea style="color: black;" [attr.disabled]="true" class="col-12" type="text" id="desc-{{caso._id}}"  >{{caso.descripcion}}</textarea>
                                    
                                   
                                
                                <span class="col-8"><button routerLink="/manager/{{caso._id}}" class="btn btn-primary" style="color: black;"  >Administrar Actividades</button></span>
                                <span class="col-4" *ngIf="caso.estado===2">
                                    <button class="btn btn-danger" (click)="deleteCaso(caso)">Borrar del dashboard</button>
                                </span>
                            </div>
                    </div>
</ng-container>

TS:

toogleEdit(id){
      if(document.getElementById("tema-"+id).attributes["disabled"]==true){
         console.log("true")
         document.getElementById("tema-"+id).attributes["disabled"]=false
      }else {
         console.log("false")
         document.getElementById("tema-"+id).attributes["disabled"]=true
      }
   }

Source: Angular Questions