How to Create an Angular Bootstrap

In this section of the tutorial we will be creating an Angular Application and integrating Bootstrap in it. When we are done with this, we will be able to give an input as a user into the application and after the click of a button that input will be displayed on the screen.
So, as we have already discussed how to create an application, let’s start by doing just that.
Use the “ng new” command on your terminal to create a project. We will be using the same project that we created earlier as a demo in the installation part. You don’t need to create the project again if you are also going to use the earlier created project. You can just start by moving to the project directory using the cd command as shown below:

Watch this Angular Bootstrap video

cd intellipaat-demo

Next, we will use Bootstrap classes to include a form in our application. But before that we need to install bootstrap. Use the following command to install bootstrap.

npm i –s bootstrap

After installing bootstrap, you will have all the necessary packages that come with the latest version of bootstrap in your project. You will see the output screen as shown in the following screenshot.
Installing Bootstrap
Now we will be doing some HTML structuring to add a form in our application. Remember those five files residing in the app folder of our project we discussed about in the installation part? Yes, we will be using those files only.

Now let’s start adding a form in our application. Open the app.component.html file in any text editor and add the following lines of code in that file.

<div class=”container”>
<div class=”form-group”>
<h1 class=”text-center text-primary”>Intellipaat Demo App</h1>
<div class=”input-group-prepend”>
<input type=”text” class=”form-control” placeholder=”Add Course” name=”Course”>
<button class=”input-group-text”>Add Course</button>

If you run the app after adding these lines, you will see that there is a form in your app aligned to the left side of the screen. That is because left is the default alignment setting.
Now let’s see how we can change the properties of this form, for example, changing the alignment, providing margin etc.
Open the app.component.css file in your editor and add the following lines of code:

padding: 0;
margin: 0;
max-width: 25em;
margin: 1em auto;

Now if you run the application you will see that the form we included in the application has been aligned in the centre of the screen as shown in the following screenshot.
form middle
Next let’s see how we can take the input from the user and store it so we can use it later.
To capture the input that the user will enter, we will insert a variable as an attribute in the input element that we have inserted in the app.component.html file
Just change the code line of the input element as shown before.

<input type=”text” #course class=”form-control” placeholder=”Course Name” name=”course” ngModel>

Let’s see what is happening in the above line of code.
We use # followed by the name of the variable to create a variable as an attribute. In our case the name of the variable is course.
Now that we have a variable, we need to get the value inserted by the user in that variable. For that, include the following line of code right after creating a variable as an attribute in the app.component.html file only.


Now, as soon as the user enters a value it goes in our variable, but it isn’t stored anywhere yet. To store that value we will create an array and pass that value from the variable to that array.

Let’s start by creating an array. We will create an empty array in app.components.ts inside a class named AppArray. Use the following lines of code to create an empty array.

export class AppArry {

When the user enters an input in the form and clicks the Add Course button, the value should get stored in the array. We have an array but to store the values we need to create a function in the same class in which we have created the empty array as shown below

export class AppArry {

Now we have an empty array ready but our application still does not know when to use it, meaning when to add the value of the variable in the array. So we will add an onclick event on the button named Add Course. Just add the click event in the button tag used in app.component.html as shown below

<button class=”input-group-text”(click)=”addCourse(course.value)”>Add Course</button>

Notice that you have to provide the name of the function that you just created in the previous step and pass the value in the variable to that function in order to store that value in the array. In our case the name of the function was appCourse().
Now all we have to do is fetch the data from the array and display it in our application. To do that, include the following line of codes in the app.component.html file.

<div class=”data”>
<ul class=”list-instyled”>
<li *ngFor=”let course of courseArray”>{{course}}</li>

After including the above code, the input value will get automatically fetched as soon as the button is clicked. As shown in the following screenshot.
After clicking on the button, the input value will be listed on the application as shown in the following screenshot.
And of course you can add some styling in your application by including fonts and colors in the app.component.css file. We have used the google fonts which are free to use and material icons, again free to use, in our application.
After adding the following lines of code in the app.component.css file, we have changed the font and font color of the “Intellipaat Demo App” heading.

@import url(‘’);
max-width: 30em;
margin: 4em auto;
position: relative;
background: #f4f4f4;
padding: 2em 3em;

Following is how the application looks after including the above code.
Kudos for making it this far! Let’s see how we can add an image in the application.
When you open your app.component.html file in the text editor, you will notice that in the first block of code, the Angular logo has been added. The syntax is simple. Width is declared and the path to the image is provided the the “src” part of the code. Let’s replace the logo with some other image.
All you need to do is place the image you want to use in the assets folder of your project. You can also use a URL of any image but there is always a risk of online images getting removed. Your application will not be able to load the image from the specified URL if the image has been removed. That is why it’s recommended to add the image that you want to use in your application in the asset folder so they are not lost or misplaced.
So after placing the image in the assets folder, just provide the path, starting from assets folder only in the src as shown below

<img width=”500″ alt=”Intellipaat Logo” src=”/assets/img/intellipaat.png”>

Following is how the final application looks like
Intellipaat demo
That would be all for this tutorial, we hope you found this tutorial helpful and got something to learn.


Angular has been dominating the world of open source web application development platform since it first came into the market. Considering all the amazing and features and high level web development support that it provides, one can be easily mistaken into thinking that Angular must be hard to learn and use. Contrary to that Angular is not that hard to learn and use. It makes working with applications fun and interesting. It’s not for no reason that Angular has such huge community and support. If you want to learn more about Angular and start making your own application, check out Angular JS Training by Intellipaat.

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *