Angular 15 Project Step-by-Step Setup for Beginner

Step-By-Step Guide to Creating Your First Angular Project (Simple Steps)

Watch Full Video :

Download Code

Step-1 : (Install Angular Cli)

first you need to do is install the Angular CLI. This is a command-line tool that will help you create and manage your Angular projects. after open a command prompt and type in the following command to create your project

code snippet

npm install -g @angular/cli

Step-2 : (Create a New Project)

Create a folder for your application in your computer, after open a command prompt and type in the following command files you need to start developing your Angular application.

code snippet

ng new projectName

you can type Y to Add routing file in your angular project, if you can type N to Not add routing in your angular project

up/diwn arrow press to you can select stylesheet format.

Step-3 : (Install Bootstrap)

Angular Don't have any Built-in css framework. you need to install bootstrap for your application look good. bootstrap is a most popular css framework. you need to install it by running the following command.

code snippet

npm install bootstrap

Step-4 : (Add Bootstrap CDN)

Add Bootstrap cdn in our angular application. Add Code in index.html file.

Step-5 : (Start the Development Server)

you can start development server. after you can open your browser and navigate to http://localhost:4200 to see your Angular Application.

code snippet

ng serve

Step-6 : (Deploy Your Application)

you can deploy angular project it to production server. you will need to create a build your application by running the following command.

code snippet

ng build

Step-7 : (Install Angular Material)

install the Angular Material UI library in project by running the following command.

code snippet

ng add @angular/material

Step-8 : (Install jQuery)

To install jquery in Angular use the following node npm command.

code snippet

npm install jquery -- save

add the reference to jquery file in Angular.json or Angular-cli.json

code snippet

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ]

finally declare a variable called jQuery or $ in the angular component where you want to use jQuery plugin and enjoy now.

code snippet

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-jquery-example',
  templateUrl: './jquery-example.component.html',
  styleUrls: ['./jquery-example.component.css']
})

 export class JqueryExampleComponent implements OnInit {

 constructor() { }

 ngOnInit() {
   $(document).ready(function() {
     alert('I am Called From jQuery');
   });
 }

}