How to disable table row in Angular

In this article we will learn how to disable every alternate (even) row in Table by using CSS.

Step 1: Let's create an HTML table using below code

               <table class="main-table">

                  <thead>

                     <tr>

                        <th> 

                           Sr No. 

                        </th>

                        <th> 

                           Fruit Name 

                        </th>

                     </tr>

                  </thead>

                  <tbody>

                     <tr *ngFor="let fruit of duplicateArray; let i = index; let even = even">

                        <td>  

                           {{i}}  

                        </td>

                        <td> 

                           {{fruit}} 

                        </td>

                     </tr>

                  </tbody>

               </table>

 

Step 2: Use below code in the .ts file

            import { Component, OnInit } from '@angular/core'; 

            @Component({ 

            selector: 'app-table-example', 

            templateUrl: './table-example.component.html', 

            styleUrls: ['./table-example.component.scss'] 

            }) 

            export class TableExampleComponent implements OnInit { 

            constructor() { } 

            duplicateArray = ['Apples', 'Apricots', 'Avocados', 'Bananas', 

            'Boysenberries', 'Blueberries', 'Bing Cherry', 'Cherries', 'Cantaloupe', 'Crab apples', 'Clementine', 

            'Cucumbers', 'Cherries', 'Cantaloupe', 'Crab apples', 'Clementine', 'Cucumbers']; 

            ngOnInit(): void { 

            } 

            } 

Step 3: Use below CSS to disable the row

table { 

            border: 1px solid black; 

            border-collapse: collapse; 

            width: 100%; 

            text-align: left; 

            thead { 

            border: 1px solid black; 

            border-collapse: collapse; 

            } 

            tbody tr td { 

            border: 1px solid black; 

            border-collapse: collapse; 

            } 

            } 

            tr:nth-child(even) { 

            background-color: lightblue; 

            cursor: not-allowed; 

            } 

Note: by using disabled property, you might get a warning/error saying It is not supported properly
Hence I have used here alternate approach

Ref link
https://github.com/coremicroservices/Arrays

 

With ❤️ Happy Coding