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.
This is a CodingTheSmartWay.com tutorial
---------------------
Musik:
Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.
(freemusicarchiv...)

[@vivianattiogbe9598]

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

[@jacquesdemolay2699]

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

[@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.

[@nirajbadaik6796]

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

[@IsaacAsante17]

You tutorial is very helpful! Thanks!

[@thomasorta4297]

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

[@sajjadhussainsunny]

Sir thankuuuuuuuuuuuuuuuuuu soooooooooo 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 ..????????

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

[@sivasumanth]

I'm getting below error when I run ng serve ..... kindly Error: ENOENT: no such file or directory, open 'C:\Users\SIVA\Desktop\angular ode_modules\jquery\dist\jquery.min.js

[@kentaro0401]

素晴らしいビデオをありがとうございました。 @ng-bootstrap/ng-bootstrap の は文法が更新されました。 (template) changed to (ng-template) ...

[@rdhrmn]

Great

[@xXSimon693Xx]

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?

[@RJ-hy4zz]

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

[@galeebbashashaik3778]

same doubt?

[@MrKusum01]

Thanks u so much for this video .... I was struggling so badly with this angular , u made me understand from this video Thanks again Sebastian

[@codingthesmartway]

Thanks so much Kusumitha

[@MrKusum01]

CodingTheSmartWay.com Can u solve the doubts apart from the video which I have ???

[@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. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" alert [ERROR ->]hello [ERROR ->]

[@Eric-qy3ce]

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

[@mattschemmer3091]

holy moly this video was helpful. thanks!!

[@adir191]

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

[@ProgrammingIsFun]

ng-bootstrap package gives you the various Javascript functionalities such as dropdown menus, carousels, modals etc. which are normally controlled by bootstrap.js and jquery.js. Angular team doesn't recommend to use Jquery or Bootstrap.js since they can modify the DOM which is not recommended in an Angular app.

[@mass13982]

Thank you...this was perfect!

[@scottsmyth3251]

Great, thank you!

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

[@sladjanivkovic2]

Just google keyboard shortcuts for switching tabs, or something like that.

[@RJ-hy4zz]

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

[@JFkingW]

Very helpful tutorial! I have two questions: I heard you should‘t use jQuery in Angular? How can I apply themes when I intalled bootstrap with npm?

[@santhoshprabhunandikolmath8325]

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

[@amarr1865]

Very helfpul, Thanks for your efforts Seb. Can you do a tutorial on Angular 4 with Google maps APIs? , map being vital in all modern applications it would be very helpful for us to learn :)

[@codingthesmartway]

Great idea! Thanks Amar!

[@admin202]

just super like your other posts ... big thanx!

[@codingthesmartway]

Thanks so much Muzafar

[@odeleyeoluwafemi6340]

I hope to get a lot from the topic. Thanks

[@codingthesmartway]

Hope so too! Thanks a lot!

[@3rdwheel2023]

Awesome and Thank you... !!!!

[@otaviomota6122]

amazing tutorial, very helpful!!!!!!

[@codingthesmartway]

Thanks a lot!

[@lickybuay]

Great Tutorial, can you make one about using the modal feature of ng-bootstrap?, Thanks :D

[@chisomokoye3730]

very helpful o, but do you have to cd into any directory before installing the boostrap@3 and the jquery also

[@lightspeedlion]

If installing with npm you have to be on your root folder (repository) and Im not sure about the others.

[@SubrataSen38]

How to enable toggle for navbar nav its not working......

[@saabirmohamed636]

thanks for the video ! for bootswatch... if I copy the min file locally I assume I can just edit the angular.cli.json styles array with it's path right?

[@codingthesmartway]

Thanks Saabir! Yes, that's right.

[@seshukumar3828]

Nice tutorial buddy. Can you please do a video on how to include other jquery plugins in angular

[@codingthesmartway]

Thanks seshu

[@arunpm9625]

Helpful tutorial. Explanations was crystal clear. Keep up the Good work :)

[@abinash8339]

how to change the tab color...

[@jessetaylor6020]

really nice work bro you're awesome!

[@jessetaylor6020]

this is the second time that i wacht this jeje

[@ale_lunalili]

Very helpful !

[@PovilasCiplis]

I wonder shy "Fancy" tab doesnt show up in my code that I wrote.

[@PovilasCiplis]

just fixed it by copying and pasting code from their official website its the "Fancy title" line so I was missing "ng"

[@eugenesveginsev4974]

Thank you

[@AngularWorld]

Nice tutorial

[@rsteveyoung]

What about "ng-bootstrap" ?

[@TheMaxstick]

how can I use ng-bootstrap with theme?

[@lerby5512]

Thank you, but it will be better if you watch it on at least 1.5 of video speed.

[@jessetaylor6020]

good tutorial thanks you helpme so much !!!

[@codingthesmartway]

Great, thanks!

[@abilashr1958]

Thanks a lot for this video, It helped me understanding on how to integrate angular with ng-bootstrap.

[@IranGr]

Excellent! thank you!

[@codingthesmartway]

Thanks a lot!

[@mayurkode8569]

good help

[@khalscodemy6739]

awesome

[@khurshedkhan52]

awesome tutorial

[@codingthesmartway]

Great! Thanks!

[@RaymondBarbour]

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

[@codingthesmartway]

That's great! Thanks a lot!

[@willl0014]

good stuff!!

[@codingthesmartway]

Thanks!

[@ifti4201]

thanks .. This help me a lot .. specially theme part ...

[@codingthesmartway]

Thanks a lot!

[@salahaelfatah_EbnElnazer]

thank you very much, this is so helpful and directly.

[@jeffreychong7928]

Thumbs up! thanks for the great video!

[@scwyldspirit]

Be aware that bootstrap just went v4-beta. Found out the hard way trying to figure out why my code was broken

[@dastgirakhtar9782]

nice

[@codingthesmartway]

Thanks

[@smileyakhi165]

Sir i want source code

[@reactdev101]

nice sweater

[@SerendipitousWizard]

Haha "Seam"

[@chemnitzel]

r u german?

[@rajureddy7512]

the bootstrap using Jquery ...

[@ariel_alves_dutra]

Thank you!!!

[@hussainwali7522]

I love your videos, I have been following for a long time now..a friendly suggestion.. edit out the "um"s from your videos..every um takes away the focus from what you are saying

[@yasser2768]

That's all useless Building reliable Angular apps should be hand crafted Don't use ready modules

[@korichiTarzi]

thank you