How to create an Angular Bootstrap?

In this section of the Angular 6 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 with a single click the input will be displayed on the screen.

Watch this Angular Bootstrap video:

Angular Bootstrap

Youtube subscribe

First, we will be following the same steps as we discussed while creating an Angular application. Without further ado, let’s start!

We will use the ‘ng new’ command on our terminal to create a project. here, we will be using the same project that we created earlier as a demo in the installation part, so we don’t need to create the project again. We can directly start by just moving it to the project directory using the cd command as shown below:

cd intellipaat-demo

Next, we will use bootstrap classes to include a form in our application. Before we do that, we need to install bootstrap. Therefore, we will use the following command to install bootstrap:

npm i –s bootstrap

After installing bootstrap, we will have all necessary packages that come with the latest version of it in our project. we 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 to our application. Remember those five files residing in the app folder of our project that we discussed about in the installation part? Yes, we will be using those files now.

Let’s start adding a form to our application. We will open the app.component.html file in any text editor and add the following lines of code:

<div class=”container”>
<form>
<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>
</div>
</div>
</form>
</div>

If we run the app after adding these lines, we will see that there is a form in our app aligned to the left side of the screen. That is because left is the default alignment setting.
formNow, let’s see how we can change the properties of this form, for example, changing the alignment, providing margin, etc.

For that we will open the app.component.css file in our editor and add the following lines of code:

body{
padding: 0;
margin: 0;
}
form{
max-width: 25em;
margin: 1em auto;
}

Now if we run the application, we will see that the form we included in the application has been aligned to the center of the screen as shown in the following screenshot:
form middleNext, let’s see how we can take an input from a user and store it, so we can use it later. To capture an input that the user enters, we will insert a variable as an attribute in the input element that we have inserted in the app.component.html file. We have to just change the code line of the input element as shown below:

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

What is happening here?

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, we have to include the following line of code right after creating a variable as an attribute in the app.component.html file.

{{course.value}}

Now, as soon as a user enters a value, it goes into our variable. However, it isn’t stored anywhere yet. To store the value, we will create an array and pass the 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 {
courseArray=[]
}

When the user enters an input in the form and clicks on the Add Course button, the value would 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 {
courseArray=[]
addCourse(value){

Now, we have an empty array ready, but our application still does not know when to use it, i.e., when to add the value of the variable in the array. Hence, we will add an on-click event on the button named ‘Add Course’ in app.component.html as shown below:

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

Note: We have to provide the name of the function that we 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 is ‘addCourse()’.

Now, all we have to do is fetch the data from the array and display it in our application. To do that, we will include the following lines of code in the app.component.html file:

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

After including the above code, the input value will get automatically fetched as soon as the button is clicked. See the below screenshot:
Typing
After clicking on the button, the input value will be listed on the application as shown in the following screenshot:
Added
Also, we can add some styling in our application by including fonts and colors in the app.component.css file. Here, we have used free-to-use Google Fonts and material icons in our application.

By adding the following lines of code in the app.component.css file, we can change the font and font color of the ‘Intellipaat Demo App’ heading:

@import url(‘https://fonts.googleapis.com/css?family=Raleway’);
form{
max-width: 30em;
margin: 4em auto;
position: relative;
background: #f4f4f4;
padding: 2em 3em;
}

The following screenshot shows how the application looks after including the above code:
Css
Kudos for making it this far!

Let’s now see how we can add an image to the application.

When we open our app.component.html file in the text editor, we will note that in the first block of code, the Angular logo has been added. The syntax here is simple. Width is declared and the path to the image is provided in the ‘src’ part of the code. Here we can replace the logo with some other image.

All we need to do is place the image we want to use in the assets folder of our project. We can also use a URL of any image, but there is always a risk of online images getting removed. Our 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 in our application in the asset folder, so it never gets lost or misplaced.

Once placing the image in the assets folder, we have to 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”>
Yippee! Here 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.

Conclusion

Angular has been dominating the world of open-source web application development platform since it first came into the market. Considering all the amazing features and the 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. No wonder that Angular has such huge community and support.

If you want to learn more about Angular and start making your own applications, check out this online instructor-led AngularJS Training from Intellipaat!

Happy learning!

Recommended Videos

Leave a Reply

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