Angular Best Practices

Hi Friends, This is Lakshman here. Welcome back to the Series " Angular Best Practices ". Today, We will go through about handling Encryption & Decryption on App. Encrypt & Decrypt As we develop the application probably, we will store some values on Session Storage or Local Storage. For Implementing, the packages required are * crypto-js * @types/crypto-js Shown as below, "dependencies": { ... "@types/crypto-js" : "^4.0.1" , "crypto-js" : "^4.0.0" , ... } We are required to set the EncryptKey for Encrypt-Decrypt the value. It's better to configure on environment.ts file as below, export const environment = { production: false, hmr: true, version: env.npm_package_version, ... EncryptKey: '<Key for Encrypt or Decrypt Values.>', ... }; For Enryption & Decryption we have numerous options such as, * AES Encryption & Decryption * Triple DES Encryption...

Hi Friends, This is Lakshman here. It's been a long time since the last post, But it's good to see you all. Welcome back to the Series " Angular Best Practices ". Today, We will go through options to navigate between page back-forth page routing on App. Back-Forth Page Routing As we develop the application most probably, we will navigate between pages. The Usually Navigation options might be as below, * Header with All Navigation Option. * From Master to Detail, etc., If, our Angular App deployed as the Web Portal. The Navigation options will be the default because you can access only via Menus. What if, our angular app deployed as Mobile App. User can able to navigate not only via Page Menu and also via default back options. In this case, most probably, we may use a navigation service to maintain history. If you navigate a page via Phone's back options, it might cause an issue on the app. To Address the Issue, I have implemented the Session storage op...

Hi Friends, This is Lakshman here. As part of the Series " Angular Best Practices ". Today, We will go through Thinks to know about Deploy Your Angular App Deployment We are always required to deploy our angular application somewhere for Testing, UAT & Production. Before that we need to know the options for deployment right, they are, Web App NgInx In this blog we will try to explore options to deploy as a Web App. If you want to deploy like as WebSite with Build, it won't support by default we need to add Web.Config File to support angular app. That Web.Config File will look like below, <?xml version="1.0" encoding="UTF-8" ?> <configuration> <system.webServer> <rewrite> <rules> <rule name= "Angular" stopProcessing= "true" > <match url= ".*" /> <conditions logicalGroupin...

Hi Friends, This is Lakshman here. As part of the Series " Angular Best Practices ". Today, We will go through Practices to follow for Working with Forms Forms In Every Angular Application, there will be at least Form to Fill by End User. Things to know There are many ways to implement Forms, Using Form Module . Using Reactive Module . Form Module Uses ngModel directive for Two-Way Binding. Required to Bind Model's Value into Object to Post for API. Need to Retrieve Data and Bind to Model's Reactive Module Uses formBuilder to generate Form in TS. Uses formControlName directive for Bind Model. Things to do Always Use Reactive Forms, if it has more than a field. Design Forms as same as Interface. Benefits , Helps to set Validator initially while creating form via Form Group. Easy Validation Options. You may also access to source code on GitHub by Click Here On-road head, we will discuss a lot of things. Looking forward to your comm...

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