Create Angular project using ng new

create
run
modify
CSS

In this article, we will learn how to create a new project in angular using angular cli. Angular Cli comes with all build-in commands to create angular project, install dependencies, run angular and to test angular application.

Make sure you have installed Angular Cli first to create project. if not, install angular cli using Node JS as described in my previous article on Angular Installation.

How to Create new Project in Angular?

Here is the step by step guide to create new project in Angular. All you have to do is to open terminal and type following command. We can also use VS Code terminal.

Create Project folder

mkdir ang
Change directory

cd ang
Create angular project

ng new ngApp
navigate to ngApp

cd ngApp
run angular project

ng serve

The Angular Project should not contain white space or test keyword. I am using ngApp as project name for reference.

After this, open your web browser and type http://localhost:4200. We will see a welcome page.

Resources

Understanding Angular directory structure

The angular project contains so many pre defined directories and files.

Angular Directory Structure


 APP 
     ngApp 
         .angular 
         .vscode 
         node_modules 
         src
         .editorconfig
         .gitignore
        {} angular.json
        {} package-lock.json
        {} package.json
         README.md
        {} tsconfig.app.json
        TS tsconfig.json
        {} tsconfig.spec.json

APP is the name of parent directory on our desktop. Remaining all things are build by Angular CLI. We have to focus on src folder in ngApp. Our main application is inside src folder. src folder is the source code of project and it includes components, index.html file, stylesheets etc.

Root Folder Content

File/Folder	Whats inside
e2e	end to end testing
node_modules	folder for node dependencies
src	folder for project source code
.angular	webpack and babel
package.json	node dependencies configuration file
angular.json	angular configuration file

src folder

Our source code in kept inside src folder. src folder also contain some pre defined files and folders. Lets understand the src folder and its content.

File/Folder	Whats inside
src	source code for angular project
app	source code for angular project having component.
assets	folder for images, css, js (frontend js) files
index.html	html page for Single Page Application
main.ts	Code to start application
styles.css	global css
favicon.ico	favicon or application icon

Modify Project

Next we will edit our project. Remember, our project source code is in src folder.

navigate to APP/ngApp/src/app/app.component.html file in VS Code and follow following steps.

remove all the content from app.component.html
add <h1> {{title}} </h1> in html
add <p> Welcome to my app </p> in html
open style.css in src folder and add css.
save files and check in browser.

ngApp

Welcome to my app

The title in h1 is already defined in AppComponent Class of app.component.ts. The default title is always the name of app. We can change the title in AppComponent Class of app.component.ts for testing. Also add one or more property like author in AppComponent Class and then print in html template by using {{author}}.

When we will save our project, Angular cli will compile our code and update on browser making our production environment highly efficient.

Update CSS

to update css in angular, we can change global css style.css in src. Remember, the style.css in src folder is global css for whole application. We can use it as common css of whole project.

Component CSS

For css changes in particular component only, use app.component.css. This will change css of that component only.

      /* style.css */
*{ 
  margin:0; 
  box-sizing: border-box;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

How to Create new Project in Angular?

Create Project folder

Change directory