NgEverything

  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 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

  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