title: Why is my Bootstrap Carousel not working?
body: <p>I am making a MEAN stack application using angular 7. I use a <em>Bootstrap Carousel</em> but it's not working.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#slider .item {
    height: 500px;
  }
  
  .carousel-caption {
    font-size: 18px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!--all above is necessary for bootstrap to function in this snippet--&gt;
  
  
  &lt;div class="carousel slide" id="slider" data-ride="carousel"&gt;
    &lt;!--indicators--&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#slider" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#slider" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#slider" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%"&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h4&gt;Welcome&lt;/h4&gt;
          &lt;p&gt;Travel! Enjoy!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item" id="slide2"&gt;
        &lt;img src="../../assets/public/5.jpg" style="width: 100%"&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h4&gt;Welcome&lt;/h4&gt;
          &lt;p&gt;Travel! Enjoy!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item" id="slide3"&gt;
        &lt;img src="../../assets/public/cardrive.jpg" style="width: 100%"&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h4&gt;Welcome&lt;/h4&gt;
          &lt;p&gt;Travel! Enjoy!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;a class="left carousel-control" href="#slider" data-slide="prev" role="button"&gt;&lt;span class="icon-prev"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a class="right carousel-control" href="#slider" data-slide="next" role="button"&gt;&lt;span class="icon-next"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any mistake I am doing with the code? I think <code>#slider</code> is not working in angular 7.</p>