Let’s Start With Angular

I am introducing byte sized articles series on angular basic concepts.This article series will help you to create a simple angular application starting with the Angular CLI. Angular is basically a collection of Components. Tools such as angular CLI, allow you to easily create Components.
Lets see how components in angular interact with each other through Services, Inputs, and Let us also understand the basics of styling components and how CSS.

Angular Series A1 : Lets-start-with-angular

We will be looking into below concepts in this article :

1.) Install Angular -> npm install -g angular-cli
2.) create angular project ->ng new project-name
3.) Start Server with cmd -> ng serve.
4.) Angular Life Cycle. -> Angular lifecycle hooks
5.) Check the prefix in angular.json

Prerequisite : NPM and Node Should be Installed.

Install Angular : npm install -g angular-cli

Create Angular Project :

Start Server : ng serve or npm start

npm start cmd will run the application on will start the server on localhost Port 4200 (Default). http://localhost:4200/

Angular lifecycle hooks

Life Cycle hooks are the points where we can control the angular application. There are 8 life cycle hooks namely ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit ,ngAfterViewChecked, ngOnDestroy.

ngOnChanges() — Called before ngOnInit() and whenever one or more data-bound input properties change.

ngOnInit() — Called once, after the first ngOnChanges().

ngDoCheck() — Called immediately after ngOnChanges() on every change detection run, and immediately after ngOnInit() on the first run.

ngAfterContentInit() — Called once after the first ngDoCheck().

ngAfterContentChecked() — Called after ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit() — Called once after the first ngAfterContentChecked().

ngAfterViewChecked() — Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().

ngOnDestroy() — Called immediately before Angular destroys the directive or component.

Angular has beautiful Guide : https://angular.io/guide/lifecycle-hooks

Angular Life Cycle Example

Sourabhhsethii/Let-Us-Start-With-Angular

Output Screen

You can clone below repository on your machine and run the demo on your local machine.

Repository : https://github.com/Sourabhhsethii/Let-Us-Start-With-Angular/tree/master/Angular-Series-A1-Lets-start-with-angular

Check the prefix

In the angular.json file just modify the attribute prefix: It will prefix the name of project before every file in angular application which helps in project segregation.

"app": [
  ...
  "prefix": "app",
  ...

Interview Question

Question 1.) What is the possible order of lifecycle hooks?

Question 2.) When will ngOnInit be called?

Question 3.) How would you make use of onNgInit()?

Question 4.) What is the difference between constructor and onNgInit()?

Question 5.) Out of onNgInit and ngOnChanges, which one will be called first when there is no input?

Congratulations! You have created the basic structure of the angular project and I hope these byte size article series will help you to learn and understand Angular.