Posts

Nested API's in Angular

Hi Friends, This is Lakshman here. As part of the Series Angular Best Practices Today, We will Nested API's in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Nested API's It is a Concept where we may call multiple API at one time or Chaining the API to Call one by one with passing data. The mainly used functions to implement Nested API from rxjs library, forkJoin mergeMap forkJoin It used to call multiple APIs to fetch all data as an array at one time. For example, return forkJoin ([ this . helloService . getData () , this . helloService . getStatus () ]) . pipe ( map (allResponses => { return { Data : allResponses[allResponses . length - 2 ] , Status : allResponses[allResponses . length - 1 ] } ; }) ) ; mergeMap It uses to chain the
Post a Comment
Read more

Pipes In Angular

Hi Friends, This is Lakshman here. As part of the Series “Angular Best Practices”. Today, We will Pipes in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Pipes It is a feature used to transform data and display it on UI. We can categorise with two options as below, Pre-defined Pipes. Custom Pipes. In Pipe, it needs to create with Model of it uses only to that Module else add to Shared Module to access it. Some Pre-defined Pipes are Datapipe PercentagePipe Decimal Pipe, etc., In regards to Custom Pipes, we create and use them. For example, To Create it, import { Pipe , PipeTransform } from '@angular/core' ; @ Pipe ({ name : 'status' }) export class StatusPipe implements PipeTransform { transform (value : unknown , ... args : unknown []) : unknown { return value ? "Completed" : "Yet To Complete" ; }
Post a Comment
Read more

Model Mapper in Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Model Mapper in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Model Mapper It's a concept build based on AutoMapper from C#. While integrating with API, When we were required to map property. The Model Mapper requires Two things to do, ModelMapper Class PropertyMap Function. The ModelMapper class file as below, export class ModelMapper<T> { _propertyMapping: any; _target: any; constructor(type: { new(): T }) { this._target = new type(); this._propertyMapping = this._target.constructor._propertyMap; } map(source: any) { Object.keys(this._target).forEach((key) => { const mappedKey = this._propertyMapping[key]; if (mappedKey) { this._target[key] = source[mappedKey]; } else { this._target[key] = source[key]; } });
Post a Comment
Read more

Tips & Tricks In Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Tips & Tricks in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Now, we are going to see some Tips & Tricks in Angular. Tip No 1: Stable our packages For machine critical applications, we need to stable our packages with a tilde(~) as below, ... "ng-block-ui": "~3.0.2", "rxjs": "~6.5.5", "tslib": "~2.0.0", "uuid": "~8.3.2", "zone.js": "~0.10.3" ... Tip No 2: Use npm audit weekly Nowadays, npm Packages may be deprecated or consist of some vulnerabilities. So we need to audit our package on a weekly or monthly basis via the below commands, npm audit To Fix packages run below command, npm audit fix If you want to enforce all the changes, add --force like below, npm audit fix --f
Post a Comment
Read more

RxJS Subject In Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will RxJS Subject in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here RxJS Subject A Subject is like an Observable, Where we can subscribe to information and receives it when new data is available. Now, we are going to see how we could use Subject in Angular. Sent Info between Components. At First, we need a service to define our Subject as below, import { Observable, Subject } from 'rxjs'; private infoSubject = new Subject<any>(); Then we need to set up the method to get Observable, Send and Clear Info as below, import { Observable, Subject } from 'rxjs'; ... onInfo(): Observable<any> { return this.infoSubject.asObservable(); } sendInfo(info: any) { if (info !== undefined) { this.infoSubject.next(info); } } clearInfo() { this.infoSubject.next();
Post a Comment
Read more

Class WorkAround in Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Class WorkAround in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Class As predominantly angular uses class on many ways such as Modules, Components, Service & lot. Now, we are going to see how we could use Class in Angular. Class WorkArounds Let us see some workaround, 1. Class Vs Interface We need to use a class instead of an interface. When we use an interface, it needs to declare its property whenever we create an instance. If we use class, we may use a constructor to set default values and set properties for class, as below, export interface <InterfaceName> { <property1>: string; <property-2>: string; } export class <ClassName> implements <InterfaceName> { <property1>: string; <property-2>: string; constructor() {
Post a Comment
Read more

Master-Child in Angular App

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
Post a Comment
Read more