How TO Install Angular 7 With Bootstrap 4 ?

Install or update to Angular user interface v7

For this tutorial you wish to upgrade Angular user interface to version 7+ if you haven’t done therefore already. to try to, therefore, you'll use this command:

npm install -g @angular/cli@latest

 create project by cli ng new angular 7

To verify you're on the correct version, run nanogram --version and verify that the output is comparable to this:

The metric weight unit new command can generate a replacement directory, produce our base application and installs the packages outlined in package.json.

Once you're within the project directory you'll begin the event server mistreatment metric weight unit serve:

Install Bootstrap and FontAwesome

We will use npm to install the dependencies:

                                                     

npm install bootstrap font-awesome

Now that the dependencies square measure put in we will tell Angular command line interface that it must load these designs.

One straightforward thanks to trying this are by the gap the file src/styles.css and adding the subsequent lines:

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

 

Configure base template and UI components

 

In the last step of this tutorial, we are going to produce a module known as UiModule and add three parts to it: LayoutComponent, HeaderComponent, and FooterComponent.

The LayoutComponent are going to be documented from the AppComponent that got generated after we ran weight unit new.