How to start New angular project

This guide shows you how to start new project in angular. Just follow the simple steps and enjoy it.

1. First download nodejs from https://nodejs.org

2. Then run the exe file to intall it.

3. Open Command Prompt and do the following steps.

3.1 To open d drive (C:\Users\siva>D:)

3.2 To install angular CLI D:\> npm install -g @angular/cli

3.3 To start new project (D:\>ng new project-name)

4. It will ask Would you like to add angular routing? (y/n)

5. Just press y and select which stylesheet format would you like to use? Choose you favourite stylesheet css or scss or sass etc.

6. Please wait 5 mins for the new project installation

7. Once the installation is completed, use the following command (D:\>cd project-name).

8. To run the project follow the command (D:\project-name>ng s -o)

9. The current project will work on the port http://localhost:4200 on your default browser

How to use jQuery with Angular?

The quick way to use jQuery in Angular is very easy. Just follow the steps below.

1. First install Jquery in your angular project using following command

npm i --save jquery

2. Then go to angular.json file and find the script part.

3. Just call the js file from the installed folder

4. The js file path is like  "node_modules/jquery/dist/jquery.min.js"

            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js"
            ]

5. Now we came to the final step, just check jquery is working or not using some script.

6. Go to your component file and import jquery (import * as $ from 'jquery';) then add alert function in your component.ts file.


For Example -:) alert("Helo Siva.....!") 

How to Install Bootstrap 3 and 4 in angular project

First, create an Angular app. Once the app is created successfully, install bootstrap 3 and 4 by using the following simple steps.

1. First install Bootstrap 3 and 4 in your angular project using following command

npm i --save bootstrap3
npm i --save bootstrap4

2. Then go to angular.json file and find the script and style part.

3. Just call the css and js file from the installed folder

4. The css file path is like "node_modules/bootstrap/dist/css/bootstrap.min.css",

5. And the js file path is like "node_modules/aos/dist/aos.js"

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
            ]

6. Now we came to the final step, just terminate the running project in Command Prompt using the shortcut ctrl+c twice.

7. Then serve the project again it'll work.

8. Use some bootstrap default classes and check the output once.

For Example -:)( <div class="container"> <h1>This is the bootstrap heading</h1> </div> )

Angular aos animation installation

1. First install aos animation in your project using following command

npm i --save aos

2. Then go to angular.json file and find the script and style part.

3. Just call the css and js file from the AOS

The aos css file path is like "node_modules/aos/dist/aos.css"

And the aos js file path is like "node_modules/aos/dist/aos.js"

The output will be like this

            "styles": [
              "node_modules/aos/dist/aos.css"
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/aos/dist/aos.js"
            ]

4. If you want to add aos animation for your entire project just add the following code in app.component.ts

import * as AOS from 'aos';

5. After that add the following code inside the export class

ngOnInit(){
AOS.init();
}

Now we came to the final step

6. Add the animation effect to the element.

data-aos="fade-left"


For Example -:)( <div class="container" data-aos="fade-left"></div> )