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!

build first angular application

      

  Generating an                                                            Angular 5 Application

Angular 5 applications are faster, lighter, and easy to use. They have material design capabilities to build beautiful and intuitive UIs . 

To get started with Angular CLI, it is required to have Node installed so that we can use the NPM tool. Executing following NPM commands generate an Angular 5 application named  'Angular-five'. 

Create a new project

open a terminal window.
Generate a new project and default app by running the following command.

ng new Angular-five


The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app.

Serve the application

Go to the project directory and launch the server.

cd Angular-five

ng serve -o

The ng serve command launches the server. 

Using the --open (or just -o) option will automatically open your browser on 

http://localhost:4200/. 

Edit your Angular-five application 

Lets change the title property from 'app' to 'My first Angular app!'. 

First open angular component . First angular component created for you . It is named app-root and it is root component , it is in ./src/app/app.component.ts 

Open the file and  change title as below, 

export class AppComponent { 

 title = "My first Angular app!"; 

 } 

So when changed browser reload automatically with new title. After reload its show ‘Welcome to My first Angular app !’ top of the angular image icon. 

              Welcome to My first Angular app ! 

 

Install Angular

Set up the Development Environment

You need to set up your development environment before you can do anything.Install  Node.js® and npm if they are not already on your machine.
watch video

https://www.youtube.com/watch?v=KKviZ_88ggs


Verify that you are running at least Node.js version 8.x or greater and npm version 5.x or greater by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

install the Angular CLI globally. 

 

npm install -g @angular/cli

 

Create a new project

 

Open a terminal window.
Generate a new project and default app by running the following command.

ng new Angular-five


The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app.