Modal component not showing up-CodePudding

I have problem with bootstrap modal not showing up and I have no idea how to fix it since nothing shows up in the console. When I look into sources > styles.css I can see that there is a Bootstrap v5.1.3 added to my project.

My component with modal:

<button type="button" class="btn btn-primary float-right m-2" data-bs-toggle="modal" data-bs-target="#exampleModal" 
(click)="addClick()" 
data-backdrop="static" 
data-keyboard="false" >
    Add Coffee
  </button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">{{ModalTitle}}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
          (click)="closeClick()">
        </button>
        </div>
        <div class="modal-body">
          <app-add-edit-coffee [coffee]="coffee" *ngIf="ActiveAddEdditCoffee"></app-add-edit-coffee>
        </div>
      </div>
    </div>
  </div>

And its .ts :

export class CoffeeComponent implements OnInit {
  ModalTitle:string="";
  coffee: any;
  ActiveAddEdditCoffee:boolean=false;
  constructor(private service:SharedService) { }

  CoffeeList: any = [];

  ngOnInit(): void {
    this.refreshCoffeeList();
  }

  refreshCoffeeList(){
    this.service.getCoffees().subscribe(data => {
      this.CoffeeList=data;
    })
  }
  addClick(){
    this.coffee={
      id:0,
      name:"",
      manufacturerId:"",
      countryId:"",
      beansProcessing:"",
      degreeOfRoasting:"",
      beanType:"",
      imgUrl:""
    }
    this.ModalTitle="Add coffee";
    this.ActiveAddEdditCoffee=true;
  }

  editClick(coffeeEdit: any){
    this.coffee=coffeeEdit;
    this.ModalTitle="Edit coffeee";
    this.ActiveAddEdditCoffee=true;
  }

  closeClick(){
    this.ActiveAddEdditCoffee=false;
    this.refreshCoffeeList();
  }

  deleteClick(coffeeDelete: any){
    this.service.deleteCoffee(coffeeDelete).subscribe(data => this.refreshCoffeeList());
  }
}

What is wrong with my code and how to fix it?

CodePudding user response：

Add this on your index.html file

  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Then on your .ts file, replace your addClick() function with this:

addClick(){
$("#exampleModal").modal("show");
    this.coffee={
      id:0,
      name:"",
      manufacturerId:"",
      countryId:"",
      beansProcessing:"",
      degreeOfRoasting:"",
      beanType:"",
      imgUrl:""
    }
    this.ModalTitle="Add coffee";
    this.ActiveAddEdditCoffee=true;
  }

That should work

CodePudding user response：

I'm not sure if this will work but try this;

openModal() {
    $("#exampleModal").modal("show");
    //...
  }