Bootstrap in angular project

 In this tutorial I will show how to add bootstrap in angular project to and will be using bootstrap css in further tutorial. There are different ways through which bootstrap can be referenced in our angular project

1.Installing Bootstrap from npm using the npm install command, 2.Downloading Bootstrap files and adding them to the src/assets  3.Using Bootstrap from a CDN

  1. Installing Bootstrap from npm using the npm install command : open new terminal->and type “npm install –save bootstrap” . by this command latest bootstrap version will be added inside node_modules/bootstrap , also package reference will be added inside package.json file , apart from this you need to install jQuery by below commands:
1
npm install --save jquery

after installing of above two we need to tell angular cli from where bootstrap referenced should be taken , to do this open angular.json file and add as below :

also in index.html page we can add reference of bootstrap file :

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
  <meta charset="utf-8">
  <title>Angular Tutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
 
</head>
<body>
  <app-root></app-root>
  <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>   
</body>

another option is to import bootstrap.css in our styles.css file : open src/styles.css and add below line:

1
@import "~bootstrap/dist/css/bootstrap.css"

In this tutorial I have used first approach . you can use whatever you like. let put below code in our app.component.html ,save and see our default page , how does it look like.

And our screen looks as below :

thats it. In this tutorial we learnt how to add bootstrap reference and use in our angular project. In next tutorial we are going to design employee form using bootstrap.

Comments

Post a Comment

Popular posts from this blog

Create Reactive form in angular

Image
  In angular we can create two types of forms 1. Reactive form 2.template based form In Reactive form  : all the codes handle in type script , no need to use ngModel to get and set value in control. we define form and formcontrolname for each control , and through formControl we get and set value .reactive form code is neat and clean when we have more complex structure or validation we should use reactive form . Template driven  : data binding is done via ngModel ,generally we can use this approach for simple form ,in this approach code became messy and very difficult to manage . Also in this approach difficult to handle all validation ,need more coding. So , I like to go with Reactive form approach instead of Template based. In our tutorial all forms will be reactive , but we can use both approach if required. I am going to create employee form which will have below fields : Employee Id ,Employee Name, email Id,Mobile Number,Password etc.. our final output will be as below : Employee
Read more

Angular Project structure and default component

Image
In my  previous   blog we learnt how to setup angular project and run default app which created by angular cli. In this blog we will learn how to set up own home page and routing. Before this lets have a look on project structure : above project structure is being created by default when we create angular app . There are many folders and files but since we are in very begining stage so we will focus only  src  folder. When you expand the  src  folder you will see below folder and files : Lets expand src->app folder and understand this : in app folder we have : 1. app-routing.module.ts : it handles routing for app ,for now we need to have little knowledge of this module ,later we will learn in details. In angular we create components like *.component.html -for our template file and *.component.ts for our typescript file. Since our focus is more on practical so I am not going in details about these. If you want you can follow the angular site. So when we need to add any template file(
Read more

Create Angular project step by step

Image
    Dear Readers, This tutorial covers : Preparation of environment Creation of First angular project Run the default generated angular project creation of best architecture of project call apis with Http Create services for http call, error handling etc. Registration and login with JWT toke decode token and get data from token                                        I believe the good way to learn anything new is to do more practical instead of theory . So after a short description will go straight for practical. Lets see what is angular and why to use  : Angular is a JavaScript based application design development framework for creating SPA(single page applications). Its a framework means it provides us all the required elements which are needed to develop a SPA. To understand more details kindly follow the  https://angular.io/docs  . Preparation of environment : In order to start angular development we need to install some software as below : Node.js : can be installed latest version
Read more