Bonjour à tous,

Je développe un site en Angular 12 avec Bootstrap 5.
Je souhaite insérer dans un formulaire, une dropdown multi select. J'ai donc trouvé ceci :
https://select2.org/getting-started/installation
J'ai d'abord testé la select box sur une simple page index. Le rendu (visuel) et le fonctionnement sont correspondants.
J'ai donc intégré la même select box dans mon formulair (projet angular) mais le rendu et le fonctionnement ne sont pas correcte Nom : Rendu.JPG Affichages : 218 Taille : 14,0 Ko
Alors qu'il devrait ressembler à ceci :
Nom : Rendu 2.JPG Affichages : 206 Taille : 18,6 Ko
J'ai vérifié dans la console si les fichiers js et css sont bien chargés et c'est le cas.
J'ai inversé l'ordre de chargement des fichiers js mais rien ne change.

Voici le code de la dropdown :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
<div class="container" [formGroup]="myForm">
  <select class="form-control m-b js-example-basic-multiple" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
  </div>

Il s'agit d'un component que j'appel dans mon component formulaire.

Voici le code de ma page index :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FoodTruckClient</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
 
  <!-- Select -->
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <link href="assets/css/select2.css" rel="stylesheet" />
  <script src="assets/js/select2.min.js"></script>
  <!------ Select ---------->
 
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> -->
 
</head>
<body>
 
  <!-- Bootstrap css -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
 
  <!-- Bootstrap Js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
  <div class="countainer">
    <app-root></app-root>
 
  </div>
  <script type="text/javascript"> 
    $(document).ready(function() {
      console.log('Ready');
        $('.js-example-basic-multiple').select2();
    });
    
    $('select').select2({
        theme: 'bootstrap5',
    });
    console.log('bootstrap');
    </script>
</body>
</html>

A noter que j'ai essayé le même code dans un projet à part (une simple page html) et cela fonctionne.
Quelqu'un aurait une idée?

Merci