Angular Best Practices

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Implement Angular Reactive Forms . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here For Code Editor its VS Code with Remote Container. If you want to develop inside Container - Check This Out Reactive Forms In Every Angular Application, there will be at least Form to Fill by End User. There are always two ways to implement Forms, Form . Reactive Forms . Its Benefits are Ability to create Dynamic Forms. Helps to set Validator initially while creating form via Form Group. Easy Validation Options. Implementation: Step 1: Add Dependencies Add ReactiveFormsModule in app.module.ts & respective Module File. import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ ... imports: [ ... ReactiveFormsModule, ... ] }) Step 2: Add Reactive Form Builder and Form Add ...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Develop Angular App inside Container . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here Install Docker - Click Here VS Code - Click Here Remote - Containers Click Here Once Install Docker & Node.JS install Angular CLI via NPM Package Manager. Implementation: Step 1: Setup Docker For Dev. To Setup Docker for Angular App for Development, Please refer the below, Blog - Click Here Video - Click Here As small Setups, Copy the DockerFile.dev via URL Set Start Script as below json "start": "ng serve --host 0.0.0.0" To Build run below command, powershell docker build -t <appN-name>:dev -f Dockerfile.Dev . Run the Container use below command, powershell docker run -it --rm -p 9001:4200 -v ${PWD}/src:/usr/src/app/src --name <container-name> <app-name>:dev Step 2: Setup Remote ...

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Implement Resolver for your angular app . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Creeate Resolver - Click Here Angular Snippets (Version 11) Click Here For Code Editor its VS Code . Resolver In Angular Application, every page requires some information to display it. By Default, every developer call service to fetch some information to display in OnInit Function inside Component. Most people forgot about Resolver itself. It helps our application to way better than you think. Service & Resolver has to be like bread & butter to Solve Data dependencies on Page Load. Things to know By default, we have the option to Create Resolver via Angular-CLI after cli version 11.0.5 or greater. Add Angular Snippets from Extension Marketplace. Each Resolver can have only one resolve method. Things to...

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Implement Logging for your angular app with REST API . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here Docker - Click Here MongoDB - Click Here MongoDB Compass - Click Here For Code Editor its VS Code . Implementation: We will go there the Implementation by Steps, Step 1: Create the MongoDB Database in Docker or Cloud For Docker: docker pull mongo docker run --name mongodb -p 37017:27017 -d mongo For Cloud: Click Here Preferred Option is Docker Step 2: Create Node.JS REST API with MongoDB. Fork the Repo: Click Here else Connect the API URl: https://ngangularpracticesapi.azurewebsites.net/ Step 3: Copy the MongoDB URI to .env like below, MONGO_URI = mongodb://localhost:37017/ngAngularPractices Step 4. Run the API on Local with below commands, npm run start:dev Step 5. Add Config to Environment Configuration File as below, ...

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Implement Logging for your angular app . Every Application required Logging irresptive of Application. Its either Front-End or Back-End. For Back-End, we have lots of packages and SDK available for such as Serilog, Log4Net for .NET Core, Framework. However, In Front-End we need to Store your Logs somewhere in NoSQL Database where we can query the logs. Today we are going to use FireBase Cloud Database to Store our logging. As its Client-side SDK. Our other options are Application Insights (Microsoft Azure) JSLog with Seq. etc., Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here FireBase Account with Cloud Database - Click Here For Code Editor its VS Code. Implementation: We will go there the Implementation by Steps, Step 1: Create the Cloud FireBase Database - Click Here Step 2: Add Web Client for Project via Steps Step 3: Copy th...