Angular Best Practices

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

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(); ...

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() { ...