Angular Best Practices

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Master-Child in Angular App . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Check this out To understand how to Structure your Angular App - click here Master-Child On every application, the master-child concept will exist because it's a traditional approach to flow data. In Angular to implement it, we have two decorators, @Input @Output These decorators will be declared only on the child component, where the master send input and receive output. Such code will look like below, //#region Input Variables @Input() todo: Todo; @Output() todosEvent = new EventEmitter<Todo[]>(); //#endregion To Send and receive information from Master , use it like angular default properties as below, <app-todo-entry [todo]="todo" (todosEvent)="rtnTodoList($event)"></ap...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Routing in Angular App . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Check this out To know how to Handle Back-Forth Page Routing - click here To understand how to Structure your Angular App - click here Route There are certain things to remember when creating routing, At First, we need to place our routing module at the end of the imports array like below, imports: [ BrowserModule, HttpClientModule, BlockUIModule.forRoot(), // Import BlockUIModule ... AppRoutingModule ], If not, your routing may break your application routing flow. Make use of all elements as required as possible. Some properties as below, data Helps to send data to the component via routing resolve Helps to retrieve or fetch data required for component via API. canActivate Helps to restrict page ...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Debug Angular App . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here VS Code Debug for Chrome Extenstion - Click Here Angular DevTools (Chrome) - Click Here Debug App There are lot of option on debugging app, we are going to look only options below, Via Debug For Chrome VS Code Extension Via DevTools (All Browser) Angular DevTools Browser Extension Do's Always Place Checkpoint on Code or Browser to debug Evalvulate the value via Debug Console on VS Code or on Browser Dev Console. Don't Never type debugger; in any part of code. Don't use console.log to check the values. It may lead to data privacy issues. Some Snapshot Debug on VS Code with Chrome Extensions Via Chrome Extension Debug on Chrome Browser via Chrome Browser Debug via Angular...