Angular 2 Events/Hooks Lifecycle

Following are brief of Angular 2 and onward related events/hooks life cycle for basic illustration:

	Lifecycle Events/ Hooks	Description
1	ngOnChanges		Fires before ngOnInit & when dataBound property changes
2	ngOnInit		Fires at on component initialize and after ngOnChanges
3	ngDoCheck		Fires at every change detection cycles
4	ngAfterContentInit		Fires after inserting content [ngContent]
5	ngAfterContentChecked		Fires after every insert content check
6	ngAfterViewInit		Fires after initialize of component/nested component
7	ngAfterViewChecked		Fires after every check of component/nested component
8	ngOnDestroy		Fires before destroy of component/directive

Read More

Angular Application Execution Cycle Summary

I came across a question about what is execution cycle of angular application in summarize manner. So following illustration will help us better understanding the execution flow of angular app:

• Main.ts runs first

• Based on definition of Main.ts, it will load "app.module.ts" which actually define "AppModule"

• For "AppComponent" defined in "app.module.ts", this will load "app.component.ts"

• A custom HTML element "app-root" linked as selector in "app.component.ts"

• This "app-root" is linked to custom tag defined in "index.html"

 

Read More

Angular/Ng command to run node server for testing app

While developing angular application through VS Code or any editor of choice, the command to run Nodejs server in order to test web application/ app in browser we need to run following command:

ng serve












This will compile angular application and deploy it on local Nodejs server mostly configured at http://localhost:4200/

Whenever we make any changes to any *.ts, index.html or css file & save it, this will recompile angular application and reload it in browser.

Read More

ng command to create new component

While using Angular 7.x if we need to create new component we use following command at terminal (I am using VS Code)

ng generate component "component name"

Above command will generate new component along with its folder under app with component name. Also it will add entry to app.module.ts file under import section & under NGModule section as well.

However, if we need to create new component without create a separate folder for component (can be used as nested component) then in terminal window first I need to get into path of component where I need to create nested component and then run following command:

ng generate component "component name" --flat

If, we need to create inline style and inline template for nested/component then we have to use following command:

ng generate component "component name" --flat -inline-style -inline-template 

Or we can use short keys for above command as :

ng g c "component name" --flat -is -it

Read More

The Angular Ecosystem

There has been lots of discussion going on related to Angular and its ecosystem. With the way changes & updates going on, this ecosystem or components on which angular ecosystem being rely it has been revolutionized as well.

Following is simple info graphic representation of Angular Ecosystem, which will help in understanding and learning angular framework to implement an enterprise level application:

Read More