top of page
Search
  • Writer's picturesourabhh sethii

Let’s Start With Angular

I am introducing byte sized articles series on angular basic concepts.These 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 Cli

Angular lifecycle hooks


Note : For better understanding of below section, please open it in Desktop.


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.





You can check in console the sequence of hooks called on load of below sample application.


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

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 will help 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.

43 views0 comments

Recent Posts

See All

Angular : Lazy-loading-ngmodules

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules loads. Lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps kee

Comments


Post: Blog2_Post
bottom of page