How to hide column in Angular 17

Ramco Ramco

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


    
           @for (item of  studentList;track $index){
            
          }
        
        
            
                
                ID
                Name
                MobileNo

                Action
            
        
        
              
                
                {{item.id}}
                {{item.name}}
                {{item.mobileno}}

ID	Name	MobileNo	Action
{{item.id}}	{{item.name}}	{{item.mobileno}}

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='';
  }

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jignesh Kumar2y ago

Hello Ramco,

You just remove that column from your HTML, as you are using *ngFor so for the onEdit and onDelete functions you will get item.id


    
        
            
                
                Name
                MobileNo

                Action
            
        
        
          
            
              

                
                {{item.name}}
                {{item.mobileno}}

Name	MobileNo	Action
{{item.name}}	{{item.mobileno}}

Jayraj Chhaya2y ago

To hide a column in Angular 17, you can use the *ngIf directive in your HTML template. Here's how you can hide the "ID" column in your table:


    
        
            
                
                ID
                Name
                MobileNo
                Action
            
        
        
            
                {{item.id}}
                {{item.name}}
                {{item.mobileno}}

ID	Name	MobileNo	Action
{{item.id}}	{{item.name}}	{{item.mobileno}}

In the above code, I have added the *ngIf directive to the "ID" column. By setting the condition to false, the column will be hidden. However, you mentioned that you still want to pass the ID as a parameter when clicking on the Edit or Delete buttons. To achieve this, you can store the ID in a variable and pass it as an argument to the respective functions:

export class AppComponent implements OnInit {
    // ...

    onEdit(id: number) {
        // Your edit logic here
    }

    onDelete(id: number) {
        // Your delete logic here
    }
}

By passing item.id as an argument to the onEdit and onDelete functions, you can access the ID value when the buttons are clicked.

Remember to update your component class accordingly and handle the edit and delete logic as per your requirements.

Jaimin Shethiya2y ago
Hello Ramco,

Please try with below code.

ID

{{item.id}}

Thanks
Jobin S2y ago
Hi Ramcoo,

Just remove td ,tr I'd related tag not affected in function