In this article we will going to learne some basics of angualar.

First we need to setup environment to start angular learning.
1) install Node.js in from this site https://nodejs.org/en/download/
2) then to install angular open your CMD and type following command
npm install -g @angular/cli

Note – If you remove -g from above command it will install angular whose scope is limited to current folder in which you have installed it
3) You need editor to write and amange your code. Basically i am using visual studio code https://code.visualstudio.com/download

Let’s create our first project.

In, above command i have created new project Whose name is JusCompile. While creating project it will prompt you for adding angular routing and stylesheet format. I have added CSS type.
To run project use

ng s-o

command. your project will start running on 4200 default port for angular. To run project on different port use

ng s --port [Port-Number]

When you open newly created project. Inside src->App folder you will get total 5 files.
i.e.
1.app.coponent.html which contains our html template.
2.app.componet.ts which is used to write business logic.
3.app.component.css which is used to design our template.
4.app.component.spec.ts this file is use for testing purpose.
5.app.component.module this file is used to group the components in a project.

We will gonna use bootstrap in this project so let’s install it with
npm install --save bootstrap

this command will install latest version of bootstrap. For specific version use

npm install bootstrap@3.3.7 --save
after @ symbol mention the version you want to install in your project.

After installation copy the path of bootstrap.min.css and bootstrap.min.js files and paste it inside angular.json file.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],

Their are two ays to write Html code in Angulat.
1 .Inside ts file we can directly write html code by using template inside @Component decorator

When you will run project.
o/p:
Just Compile
Welcome to just Compile.

Note: while writing html inside ts file always use back tick(`) caharacter don’t use double quote(“) or single quote (‘).

2. By creating seprate html file and providing its link by templateUrl.

Now, let’s create employee folder under app folder.
and add corresponding css,html and ts files.
employee.component.ts :

import { Component } from "@angular/core";

@Component({
selector: ‘JustCompile-employee’,
templateUrl: ’employee.component.html’,
styleUrls:[’employee.component.’]
})
export class EmployeeComponent {
title=”Welcome in Just Compile LLP”;
}

Inside @component annotation we use
selector: To add selector for our component.
templateUrl: To provide path of our html file.
styleUrls: To provide path of our stylesheet file.

employee.component.html:

Welcome to {{ title }}!

run the project

o/p:

1. Interpolation {{ }}
2. Property binding [ ]
3. Event binding ( )
4. *ngFor
5. *ngIf

Interpolation {{ }} : This interpolation displays the value of property as a text. It cleans the code and display it in pure text form.We can use in

Property binding [ ]: With property binding we directly use the value of property with element attribute.

Event binding ( ):   With event binding we can handle events.

*ngFor :  With *ngFor qw can loop trough particular block in a html

*ngIf: With *ngIf we can hide and Show the component. It actually renders the component.