How to add some Jquery code in angular Project

Question

I'm trying to add some Jquery Code in Angular application but showing an error because I don't know how to use that Jquery code in the angular if I running in HTML file working fine below is my sample code please help me

<script type="text/javascript">
    $('.js-example-basic-single').select2({
        placeholder: '--- Select Country ---'
    });
</script>

Don't do it! You shouldn't need to use it. – mbx-mbx Oct 15 '19 at 08:34 — mbx-mbx, Oct 15 '19 at 08:34

score 0 · Answer 1 · answered Oct 15 '19 at 08:03

0

You simply need to add the CDN link of jquery in the tag. You can find the CDN links for each version of jquery here.

answered Oct 15 '19 at 08:03

assax24

171
5

score 0 · Answer 2 · answered Oct 15 '19 at 08:05

0

add this to your code before using jquery

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

answered Oct 15 '19 at 08:05

Andrew Nic

108
1
11

score 0 · Answer 3 · answered Oct 15 '19 at 08:50

var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
  function($scope) {
    $scope.greeting = {
      text: 'Hello'
    };
  }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>

<body ng-app="appname">
  <div ng-controller="appCtrl">
    <p>{{greeting.text}}, world </p>
  </div>
  <select id="example" class='js-example-basic-single' multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
  </select>
  <script type="text/javascript">
    $('.js-example-basic-single').select2({
      placeholder: 'Select a month'
    });
  </script>

Note:-This is the simple demo to for your query You have to add the CDN link of j query.

How to add some Jquery code in angular Project

3 Answers3