Angular Best Practices

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

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

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 Your First Module. If you're required to know, Options to Setup Angular Environment Click Here Practices for Your First Angular App 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" , ... } , ... Things to know On Module By Default App Module is Entry Point for every App. Each Angular App is required to have @Core & @Shared Module Apart from App Module. In @Core Module Should Include All Common Services, Interface, Enum, etc., Some Services, Authentication Validator Logger, etc., Should not include any UI related ...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will go through Practices followed on Our First Angular App. We have covered things using Angular CLI in Window. If your required to know Options to Setup Angular Environment Click Here Prerequisites are Node.JS Angular CLI (For App Creation) VS Code Once the prerequisites got installed, we will create our New Angular App at first. Suggested Points are In Create App in CLI: Finalize the CSS Style Type before creating Angular App. Always Set Angular Routing By Default. In Any Terminal : PS E:\Lakshman_IP\Blogger\AngularPractices> ng new ? What name would you like to use for the new workspace and initial project? ngAngularPractices ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ] ... As Base Configuration: On build remove app name in the output ...

 Hi Friends, This is Lakshman here. As Initial, we have discussed best of option to " Setup Environment For Angular App Development. " Now, We will go through various " Generator  " used to Create Angular Applications.  Such Generator is  Ngx-Rocket. Nrwl. Both Generator uses Base Angular CLI. Ngx-Rocket: It provides an enterprise-grade project generator with Default GIT Support. Its provides various features & supports, such as  Web App.  Mobile App (via Cordova). Desktop App (via Electron). PWA. Cordova Platforms such as Android & iOS. Cross-Platform Desktop Apps. Analytics Support  Language Support Auto-Deploy to Azure, FireBase, etc., It Provides various Default UI Frameworks such as Angular Material, Ionic & Bootstrap with some Default Angular Practices, such as  Authentication Module. Lazy Loading. Additional Tools & libraries for Angular.  Nx: It provides an enterprise-grade project generator with Default GIT Support. I...

Hi Friends, This is Lakshman here. Let's take out the first step against " Angular Best Practices ". As Initial, we will discuss best of option to " Setup Environment For Angular App Development. " Currently, there are various ways to Setup Dev-Environment in different platform. On this, we will set up for Window Platform. In Windows: We do hick of mistakes on installing angular dependencies by Manual in Windows. Node.JS Usually, we download the Current Version instead of LTS Version because we want to work on the latest technologies "That First Issue."   because each angular application has its node-sass dependencies for SCSS Files which supported by LTS version, but not in Current Version.            Point : Always Use  LTS Version  of Node.JS Angular CLI Always install the Angular CLI If you are required to create a new Angular Project.  The reason behind is every existing angular project consist of Angular-CLI inside ...