Dropdown multi select Select2 avec Angular

**paintbox** · 15/09/2021, 14h53

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 : 181
Taille : 14,0 Ko

Nom : Rendu.JPG
Affichages : 181
Taille : 14,0 Ko

Alors qu'il devrait ressembler à ceci :
Nom : Rendu 2.JPG
Affichages : 170
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>