Ramco Ramco

Ramco Ramco

  • 444
  • 3.4k
  • 535.5k

How to hide column in Angular 17

May 9 2024 9:25 AM

Hi

In the HTML below, I want to Hide ID, but I want to pass it as a parameter when clicking on Edit or Delete.

<div class="col-lg-8">
    <table class="table table-striped table-bordered">
        <thead class="thead-dark">
            <tr>
                <!-- <th scope="col">#</th> -->
                <th scope="col">ID</th>
                <th scope="col">Name</th>
                <th scope="col">MobileNo</th>

                <th>Action</th>
            </tr>
        </thead>
        <tbody>
           @for (item of  studentList;track $index){
            <!-- <tr *ngFor="let l of studentList; let i = index"> -->
              <tr>
                <!-- <td>{{l + 1}}</td>  -->
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.mobileno}}</td>

                <td>
                    <!-- <button type="button" class="btn btn-primary btn-sm me-2" >Edit</button>
                    <button type="button" class="btn btn-danger btn-sm ml-1"  >Delete</button> -->
                    <button type="button" class="btn btn-primary btn-sm ml-1" (click)="onEdit(item.id)">Edit</button>
                    <button type="button" class="btn btn-danger btn-sm ml-1" (click)="onDelete(item.id)">Delete</button>
                </td>
            </tr>
          }
        </tbody>
    </table>
</div>

 

export class AppComponent implements OnInit{
  title = 'AngularFrm';

   isEditMode: boolean = false;
   isSubmitMode: boolean = true;


    @ViewChild('myModal') model : ElementRef | undefined;
    studentObj: Student = new Student();
    studentList:Student[] = [];

    ngOnInit(): void {
      const localData = localStorage.getItem("angular17Crud");
      if(localData != null){
        this.studentList=JSON.parse(localData)
      }
  }

-------------------------------------------------
export class Student {
  id:number;
  name:string;
  mobileno:string;
  email:string;
  city:string;
  state:string;
  pincode:string;
  address:string;


  constructor(){
    this.id=0;
    this.address ='';
    this.name='';
    this.mobileno='';
    this.email='';
    this.city='';
    this.state='';
    this.pincode='';
  }

Answers (4)