Angular Best Practices

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices with Implement Dynamic Styles for Angular App. Dynamic Styles As Default, Every Component has its style. In Some cases, we may require to switch between styles or classes. For Example, we required to Display a Card, - Color Red for Error Status. - Color Green for Success Status. ngStyle What we usually do we will check for condition on ngStyle to change Color like below, <div [ngStyle] = "{'color': item.Status.toLocaleLowerCase() === 'error' ? 'red' : 'green' }" > In ngStyle , we can't have multi-Condition in HTML. If we require, we need code like below, In HTML: <div [ngStyle] = "{ 'color': getColor(item.Status) }" > In TS: //#region Switch Styles getColor(status: string) { switch (status.toLocaleLowerCase()) { case 'success': ret...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices to followed on Handling Multi-Environment for Angular App. In all command, request to use Angular CLI installed in App's Dev Dependencies. In package.json "scripts": { "ng" : "ng" , ... } , "devDependencies": { ... "@angular/cli" : "~10.0.6" , ... } , ... Angular Environments As Default, The Angular creates environment.ts & environment.prod.ts files to Handle Environments. Usual Environment variables are, Production Flag. API Url, etc., If we have more than Two Environments such as QA, UAT, we usually create environment.qa.ts & environment.uat.ts and configure variables. The Current problems were, We are needed to create each file per environment, which drives to rebuild application per environment. Can't able to Change variables While App...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices to be followed for Implement Components Component In Angular Application, Only things interact with End Uses are Components via HTML. Things to know There are many ways to Use a Component, Main Component (May uses Both Shared & Entry Components) Shared Component (Such as Header, Footer, Menu's, etc.) Entry Component (Used for Dialog, Panels, etc.) Required to know Life-Cycle of Components. Such Life-Cycle are OnChanges OnInit AfterContentInit AfterViewInit OnDestroy, etc., Things to do Keep components small and function-specific. Components should only deal with display logic. Avoid logic in templates. The code should execute as expected and be testable. All files related to the component should be in a single folder. Follow linting rules, break up lines that are too long. Avoid having subscriptions inside subscriptions. A...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices to be followed for Implement Service with Resolver If you're required to know, Options to Setup Angular Environment Click Here Practices for Your First Angular App Click Here To Implement Your First Module Click Here I have covered things using Angular CLI in Windows. In all command, request to use Angular CLI installed in App's Dev Dependencies. In package.json "scripts": { "ng" : "ng" , ... } , "devDependencies": { ... "@angular/cli" : "~10.0.6" , ... } , ... Service In Angular Application, we should not operate Fetch & Save Data within Component. For that purpose, we start using Service. By Default, every developer thing of Angular Service is only to consume data via API. It is more than it. Things to know A Piece of Code required to write...