Using Bootstrap with Angular

Using Bootstrap with Angular

Bootstrap is the most popular HTML, CSS, and JavaScript framework for web front-end development. It's great for developing responsive, mobile-first web sites.
The Bootstrap framework can be used together with modern JavaScript web & mobile frameworks like Angular. In the this tutorial you'll learn how to use the Bootstrap framework in your Angular project.
Furthermore we'll take a look at the Ng-Bootstrap project which delivers Angular Bootstrap components which can be used out of the box.

---------------------

Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.

[vivianattiogbe]

This guy is the real deal, came here after reading is blog post on how to use bootstrap with angular. Very informative, please keep the good stuff coming Sebastian Eschweiler

[jacquesdemolay]

I am surprised to see you added the <script> tags for jQuery and Bootstrap in the body section rather than in the header section as it is customary.

[nirajbadaik]

Thanks for the video. I found it very helpful easy to understand.

[xXSimonXx]

18:35 Does the order of the css files make any difference? Can I still write some changes into the styles.css if I put bootstrap on the second position?

[thomasorta]

in the case to use ng-bootstrap is necessary to install bootstrap also, because some component like navbar is not in ng-boostrap, right?

[ChristianAchter]

Great video. Unfortunately, Angular was updated (as expected) and the file structures were changed so I had to look for another tutorial that fits the current versions. Great work though, love the different ways to solve the problem.

[sivasumanth]

I'm getting below error when I run ng serve kindly
Error: ENOENT: no such file or directory, open

[Eric-qyce]

what need to include the jquery script in the angular-cli.json? will it be a source of conflict in the future? I thought angular is taking control of all javascript. Can you explain that a little bit more? Besides, I am really frustrating about learning angularJs and the relevant project like this one ng-bootstrap. Do you have any more video like this or tutorial materials ? I found many tutorial that either the tag(component) was not recognisable (maybe the attributes inside has changed) or the style that assign to class was not working..

[adir]

what different ng-bootstrap to bootstrap we already install in the beginning of the this video(bootstrap 3)?

[formynet]

by using CDN in index.html, i get below error :(
compiler.es5.js:1689 Uncaught Error: Template parse errors:
'alert' is not a known element:
1. If 'alert' is an Angular component, then verify that it is part of this module.

alert
[ERROR ->]<alert type="success">hello</alert>
<!-- boot strap test
alert
No provider for ControlContainer ("
-->

[ERROR ->]<form class="form-horizontal" role="form">
<div class="form-group">

[jasonwilliams_escapeimagery]

What's your view on using jquery with angular and do you recommend using it inside a life cycle hook such as ngafterviewinit ? I'm concerned about manipulating the Dom and it's adverse affects on angular2 virtual Dom

[sajjadhussainsunny]

Sir much for very helpful this tutorial and it, s my humble request make a New tutorial make a Fully template single page or landing page Angular 4 with bootstrap i did't find on you-tube like thank u so much and i'm waiting for you next lecture on template

[SubrataSen]

How to enable toggle for navbar nav its not

[santhoshprabhunandikolmath]

Hi sir.I am using ubuntu 64 bit OS.I am unable to install Angular command line, its not installing.
So kindly help me.

[kentaro]

素晴らしいビデオをありがとうございました。
@ng-bootstrap/ng-bootstrap の <ngb-tabset> は文法が更新されました。

<ngb-tabset>
<ngb-tab title="Simple">
<ng-template ngbTabContent>
(template) changed to (ng-template)
</ng-template> ...

[RJ-hyzz]

Hi Bro, There is any similarity in bootstrap and ng-bootstrap

[RJ-hyzz]

Which is the best way to add bootstrap? CDN or NPM bootstrap package.

[mattschemmer]

holy moly this video was helpful. thanks!!

[hironakae]

Sort of off topic but how are you switching tabs? a search bar pops up and you type iterm I'd love to know! thanks for the video it's very helpful

[RaymondBarbour]

Thanks. I was struggling to find a simple set of steps to set up angular and bootstrap. very helpful