In Angular, you would typically use a component-based approach to handle modals. However, if you want to use Bootstrap modal in Angular, you can do so by using *ngIf directive to conditionally render the modal based on a property in your component.

Here’s how you can modify your code:

First, in your component TypeScript file, define a property showModal and a method openModal():

showModal = false;

openModal() {
  this.showModal = true;
}

Then, in your HTML, use the *ngIf directive to conditionally render the modal:

  

    

      
Student Portal
    
    

      Add New
    
  





  

Now, the modal will only be displayed when showModal is true, which happens when you click the “Add New” button and the openModal() method is called. 

Thanks

Hello Ramco,

add *ngIf for your model div 

  

    

      

        
Create New Student
        
      
      

        
        
      
      

        Close
        Save changes
      
    
  

export class StudentComponent {
  isModalOpen: boolean = false;

  openModal() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
  }