• Use Latest version of NodeJs
• 'npm init' to create a package.json
• Install TypeScript 'npm i typescript'
• Initialize TypeScript
• 'tsc --init'

• Directives are used to change the behaviour and appearance of the DOM element
• Directives can implement all lifecycle hooks
• Directives can not have templates
• *ngIf, *ngFor, *ngSwitch, ngClass, ngStyle

• Structural Directives[*ngIf, *ngFor, *ngSwitch]
  • costs more as they change the behaviour of the DOM, so they can effect on performance
  • can add/remove element from DOM, can modify element from DOM
• Attribute Directives[ngClass, ngStyle]
  • can not add/remove element from DOM but can modify element from DOM

• Pipes are used for data transformation
• Pipes do not change actual object
• Build-in Pipes
• DatePipe
• UpperCasePipe
• LowerCasePipe
• CurrencyPipe
• DecimalPipe[3 types][how many numbers after decimal 1.1-1][pass local]
• PercentPipe
• JsonPipe[to only use in debugging purposes]
• SlicePipe[x:y=starts from x:go till to y without y][general us of slice is for pagination, but recommended not to use]
• AsyncPipe

npm i bootstrap to install bootstrap

go to node_modules and find bootstrap=>boostrap.min.css=>copy related path

go to styles.scss and add the bootstrap path

OR go to the angular.json file and find the styles portion and add the path here node_modules/bootstrap/dist/css/bootstrap.min.css

• ngOnChanges [Immutibility: return new instance everytime when object/array updates. ] [ you can only apply it on component which has @Input property ]
• ngOnInit
• ndDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngOnDestroy

Check if node is installed, otherwise install node

Create a folder and open the folder in Visual Studio Code

Open the terminal in VSCode and use npm init (this will create a package.json file)

Install TypeScript by using npm i typescript in the folder on the terminal (this will fetch the node packages into the folder)

Use tsc --init in the terminal to tsconfig.json file in the folder on the terminal

In the 'tscconfig.json' file, update the value for 'target' to "ES2015"

Create new file datatypes.ts

Use tsc on the terminal to compile ts code

node -v for node version

npm -v for npm version

Write some datatype on the datatypes.ts file

Compile the code with terminal with tsc (This will rewrite the code in the datatypes.js file)

Check the console log in the termainal by writing node datatypes (node jsFileName)

Create new file functions.ts for functions separately

Create new file with name Class.ts and to remember that class names are PascalCase for naming convenstion

In typescript, you can not have both default and parameterized constructor, you have to have one.

outDir in the tsconfig.json helps us to manage all the generated compiled javascripts files into some specific folder. Modify the directory to a folder name ./dist and run tsc, all the js files will be moved to the directed folder.

sourceMap in the tsconfig.json helps us to check the source map. Modify the sourceMap value to true and run tsc, it will create .js.map files and these contain the information where this code is getting generated. It tells the browser which .ts files to use.

noEmit in the tsconfig.json helps us not to generate any output files in js. Delete all the javascript output files and the dist folder created earlier, Modify the noEmit into true and run tsc, it will no more make any javascript output files.

If you put back the value of noEmit to false and run tsc, you will find out that even if you have errors in typescript, it will not stop compiling. So that all .js output files will be generated

Open the command promts and go to your project directory. npm I @angular/cli -g OR Use npx to avoid having global version.

ng new hotelinventoryapp -createApplication=false for empty workspace OR ng new hotelinventoryapp

npm i to install packages into empty workspace

ng g app hotelinventory to create new application, here hotelinventory is our workspace nake, No to google analytics, yes to routing, SCSS for stylesheet

Delete the folder and now lets make the project direclty with all the packages

Let's make a angular project with this command; ng new hotelinventoryapp and routing=yes, stylesheet=SCSS