title: How to show edit icon for few rows on mat table
body: <p>I am new in Angular. I added one more column on mat table for editing the field. But it is showing for every column. I want to make only few rows editable. How can i achieve it?</p>
  
  <p>It looks like this
  <a href="https://i.stack.imgur.com/6DBYs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6DBYs.png" alt="enter image description here"></a></p>
  
  <p>I want to display edit icon for only 2nd and 3rd row. But it showing for each and every row. I tried *ngIf but not able to write it's TS code.</p>
  
  <p>Below i am attaching my code whatever i tried </p>
  
  <blockquote>
    <p>details.component.html</p>
  </blockquote>
  
  <pre><code>&lt;div class="reviews-style"&gt;
  &lt;div&gt;
  
  
      &lt;table mat-table [dataSource]="dataSource" class="mat-elevation-z1"&gt;
          &lt;ng-container matColumnDef="key"&gt;
          &lt;td mat-cell *matCellDef="let element" class="item-name"&gt; {{element.key}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="value" &gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; No. &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element" &gt; 
                &lt;span *ngIf="!element.editable; else editPlace"&gt;
                {{element.value}} 
                &lt;/span&gt;
                &lt;ng-template #editPlace&gt;
                  &lt;input [(ngModel)]="element.value" (keyup.enter)="element.editable = false"&gt;
                &lt;/ng-template&gt;
              &lt;/td&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="actions"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt;Actions &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;                
                &lt;button mat-icon-button matTooltip="Click to Edit" (click)="edit(element)" class="iconbutton" color="primary"&gt;
                    &lt;mat-icon aria-label="Edit"&gt;edit&lt;/mat-icon&gt;
                  &lt;/button&gt;            
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
  
          &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;&lt;br&gt;&lt;br&gt;
  &lt;button mat-stroked-button class="b1" (click)="update()" formtarget="_blank"&gt;Update&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <blockquote>
    <p>details.component.ts</p>
  </blockquote>
  
  <pre><code>interface Data {
    key: string;
    value: string;
    editable: boolean;
  }
  
  const namesEnum: {[key:string]: string} = {
    'vid' : 'Vendor Id',
    'bn' : 'Vendor Name',
    'cate' : 'Category',
    'jdate' : 'Joining Date',
    'pcount' : 'Total No of Packages',
    'ocount' : 'Total No of Outlets',
    'scount' : 'Total No of Services',
  }
  
  
  @Component({
    selector: 'app-vendordetails',
    templateUrl: './vendordetails.component.html',
    styleUrls: ['./vendordetails.component.css']
  })
  export class VendordetailsComponent implements OnInit {
  
    constructor(private activatedRoute:ActivatedRoute,private apiService:ApiService) { }
  
    dataSource: Data[] = [];
    displayedColumns: string[] = ['key', 'value','actions'];
    vid:any;
    result:any;
    result1:any;
    col:any;
  
    ngOnInit() 
    {
      this.vid=this.activatedRoute.snapshot.paramMap.get('vid');
  
      this.activatedRoute.queryParamMap.subscribe((queryParams:Params)=&gt;{
        let vid=this.vid;
  
       this.col='vdetail'
        this.apiService.getVendorDetailsById(vid,this.col)
        .subscribe(data=&gt;{
          this.result = data[0];
  
          const newdata: Data[] = [];
          for (const prop in this.result) {
          newdata.push({
          key: namesEnum[prop],
          value: this.result[prop],
          editable: false
          })        
          }     
        this.dataSource = newdata;
        });
      });
    }
  
    edit(e: any) {
      e.editable = !e.editable;
    }
  
  }
  </code></pre>
  
  <p>I am getting data in my "dataSource" in this format</p>
  
  <pre><code>(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
  0: {key: "Vendor Id", value: "1", editable: false}
  1: {key: "Vendor Name", value: "Free Charge", editable: false}
  2: {key: "Category", value: "Beauty &amp; Salon, Fitness, Food", editable: false}
  3: {key: "Joining Date", value: "01-05-2019 11:30:25", editable: false}
  4: {key: "Total No of Packages", value: "21", editable: false}
  5: {key: "Total No of Outlets", value: "9", editable: false}
  6: {key: "Total No of Services", value: "53", editable: false}
  length: 7
  </code></pre>