Angular With Bootstrap

Angular with Bootstrap

Install Bootstrap  

01.using command line (using Ng-Bootstrap) 

In this post we going to add bootstrap for our angular project . Let’s do step by step….

Step 1.

Open your project in visual studio code and open terminal. ( either open cmd and go project directory).

(if you haven't project create a project using Angular CLI)

Step 2.

 Ng-Bootstrap is available as a NPM package, so the installation can be done by using the following command in the project directory:

npm install --save @ng-bootstrap/ng-bootstrap

ex: c:\Users\..\[your project name]> npm install –save @ng-bootstrap/ngbootstrap .

Step 3.

Go to app.module.ts and import NgbModule from the package @ng-bootstrap/ng-bootstrap.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';.

Step 4.

Imports array of the @Ngmodule decorator.

@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}

Step 5.

Let’s go bootstrap site , use html template what do you want,

click link

https://getbootstrap.com/docs/4.1/getting-started/

02.using Bootstrap from CDN (Content Delivery Network)

Step 1.

go to bootstrap site.

https://getbootstrap.com/docs/4.1/getting-started/

Step 2.

Copy css stylesheet link and open index.html file in your project.

Paste the stylesheet link into before all other stylesheets.

Step 3.

Copy js script file and paste end of pages, before

.

Step 4.

Now you can use bootstrap component in your angular project.

Open home.component.html in your angular-five project.

Paste below code phase.

Open home.component.ts and set variable name =”Bootstrap works !.”.

Run project.

Work with Angular

Create a Component

To create component,
1. first  create folder as component.(This is optional . using folder we can make clean & clear
   project ).
2.open terminal.
3.run command ng generate component [component name] .( short form => ng g c [component name]).

4.Now open home u can see

•  home.component.css 
•  home.component.html 
•  home.component.spec.cs
•  home.component.ts     

5. Open home.component.ts and get word phase in selector

  @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

6. Add selector to app.component.html
    
7. Rerun project  and see in your browser . you can see
       home work!