Angular Bootstrap - Bootstrap Carousel In Angular

Angular Bootstrap - Bootstrap Carousel In Angular

In this Angular bootstrap Tutorial, we will try to implement angular bootstrap carousel in an angular way by clearing some our concepts of angular including angular loops with *ngfor , angular component style with ng style and ngclass directives

Prerequisite

Setup your development environment
Create your first angular bootstrap project 
Integrate Bootstrap In Angular
So I hope you already have a project with bootstrap enabled in it .so let's implement first the navbar so open your app.component.html and paste the code below which is nothing more the snippet from getbootstrap.com

<nav class="navbar  navbar-expand-lg navbar-dark bg-grad1">
  <a class="navbar-brand" href="#">
    <img
      src="https://www.smartcodehub.com/assets/images/newlogo.png"
      width="40"
      height="40"
      alt=""
    />
  </a>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
<li class="nav-item active">
        <a class="nav-link" href="#">Blogs </a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Submit Blog </a>
      </li>
    </ul>
  </div>
</nav>


// add this class to make your navbar look pretty
.bg-grad1 {
  background-color: #537895;
  background-image: linear-gradient(315deg, #537895 0%, #09203f 74%);
}

And your application will look something like this you can run your application by ng serve -o command

Angular Bootstrap - Bootstrap Carousel In Angular

so we have our navbar lets implement a bootstrap carousel it just copy the code below in app.component.html

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

and we will have a working carousel in our application
but with this is not bootstrap application it's primary an angular application and we should always leverage the angular application in the best way possible so let's see what we can do
so the first thing you will see we have 3 carousel-item in our code 
and the data is also hardcoded so lets first make our data come from app.component.ts from typescript

FeaturePosts: BlogPost[] = [
    {
      ImageUrl: '../assets/images/fbp1.jpg',
      Title: ' Work, Travel, Save, Repeat.',
      subHeading: ' Be fearless in the pursuit of what sets your soul on fire.'
    },
    {
      ImageUrl: '../assets/images/fbp2.jpg',
      Title: 'Travel makes one modest.',
      subHeading:
        'Travel makes one modest. You see what a tiny place you occupy in the world.'
    },
    {
      ImageUrl: '../assets/images/fbp3.jpg',
      Title: 'To Travel is to Live.',
      subHeading:
        'The life you have led doesn't need to be the only life you have'
    },
    {
      ImageUrl: '../assets/images/fbp2.jpg',
      Title: 'Travel makes one modest. next',
      subHeading:
        'Travel makes one modest. You see what a tiny place you occupy in the world.'
    }
  ];

now to render this data in HTML we will need to run a loop which can generate some HTML based on our data so we will use *ngfor structural directive so we will delete the last two

carousel-item divs

and now we will implement ngfor 
the syntax is *ngfor="let item of items" where items should be an array remember ngfor only works with arrays br>

<div class="carousel-inner">
      <div
        class="carousel-item active"
*ngFor="
          let item of FeaturePosts;
          index as i;
        "
      >
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h1>{{ item.Title }}</h1>
          <p>
            {{ item.subHeading }}
          </p>
        </div>
      </div>
    </div>

now with this change, if you will run your application the app should break and that brings us to our next concept the metadata which ngfor provides us
so first let see what the problem is the active class is applied to all the items initially and that should not be the case active class should only be applied to the first item for that we will use some metadata given by ngfor to us and we already have one that is index as i , so similarly we will use one more that is first as isFirst and this isfirst variable will be true only for the first item br> so now we know which slide is first but how can we apply a class only to the first item and not the rest and for that we will use

ngClass Structural directive

ngClass is an angular directive which shifts with an angular bundle  we can use angular ngclass in many ways
1. ) we can pass a static string or array of strings to ngClass like

[ngClass]="'card-incomplete'"
//for passing and array
[ngClass]="['card-incomplete','card-incomplete-text']"

2. ) we can pass a variable to ngclass directive and sets its value from the appcomponent like

//in component
completeClass="card-incomplete"
//in html template
[ngClass]="completeClass"
//for passing an array for multiple classes
//in ts
completeClass="card-incomplete"
completeTextClass="card-incomplete-text"
in html
[ngClass]="[completeClass,completeTextClass]"

3.) we can pass a configuration object in ngclass in which the properties are the class names and values are true or false if the value is true the class will be added if it is false class will not be added let's see it in code

[ngClass]="{'card-incomplete':true,'card-incomplete-text':false}"

in the above code snippet, 'card-incomplete' will be added as its value is true and card-incomplete-text won't be added as its value is false in this way, we can add angular class conditional
4.) we can even pass a function the condition is the function should return the classes in string format lets say we have a function which returns a class

getSuccessClass(){
   return 'card-incomplete';
}
//in html


[ngClass]="getSuccessClass()"

so this way we can add angular class conditionally
so now lets use ngclass in our project

<div class="carousel-inner">
      <div [ngClass]="'active':isfirst"
        class="carousel-item active"
*ngFor="
          let item of FeaturePosts;
          index as i;first as isfirst
        "
      >
      <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h1>{{ item.Title }}</h1>
          <p>
            {{ item.subHeading }}
          </p>
        </div>
      </div>
    </div>

and with this in place, our bootstrap carousel should work as expected and with a little bit styling it will look something like this

Angular Bootstrap - Bootstrap Carousel In Angular

Thanks a lot, Visit smartcodehub.com

Show Us Your Support And Share Us On