JavaScript Unscripted

With reference to the apps we already have set up, Disclaimer: This is just to demonstrate a shared state. Not to be used in an ideal login/logout scenario. The best way to handle login/logouts are to use httpOnly cookies that use a token in BFF layer Let's say we we want to handle user's authentication create a folder, i am calling it "shared-library" cd shared-library ng new shared-library --create-application=false ng generate library KavyaMyUserServiceLibrary (cant use too generic names, it will not allow for public publish) Inside shared-library\shared-library\projects\user-service-library\src\lib\user-service-library.service.ts import { Injectable } from '@angular/core' ; import { BehaviorSubject } from 'rxjs' ; @ Injectable ({   providedIn : 'root' }) export class UserServiceLibraryService {   constructor () { }   private loggedIn = new BehaviorSubject < boolean >( false );   loggedIn$ = this . loggedIn . asObservable...

These are intermediate to advanced level concepts as a pre-understanding of angular is needed Real-life scenarios for using every concept mentioned below is included 1.        Custom Directive (Custom HTML elements!) Directives are angular syntax for HTML elements. 3 Types: Scenario for Attribute directive: To stop the user from copy pasting to an input field @Directive({ name: ‘[ preventCopyPaste ]’ }) @HostListener(‘paste’, [‘$event’]) blockPaste(event) { event.preventDefault() }   Use it in any input box: Confirm Email ID <input preventCopyPaste type=”text”> Note: Selector should be in square braces (selector: [preventCopyPaste] ). Use HostBinding and HostListener   2.        Custom Filter Note: for parameterized filter/Pipe, transform(texVal, paramVal), parameters start from 2nd argument ( {{title | prepend: 'PCBA') }} Pure Filter: Run the filter only for changes to its input val...

What is Jasmine?   DOM-less simple JavaScript testing framework. Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus, it's suited for websites, Node.js projects, or anywhere that JavaScript can run. What is Karma?   Spectacular Test Runner for JavaScript. Karma is not a testing framework, nor an assertion library. Karma just launches a HTTP server, and generates the test runner HTML file you probably already know from your favorite testing framework. So for testing purposes you can use pretty much anything you like In short, Jasmine: Javascript Testing Framework.   Can be used as TDD Karma: Browser testing. Used as a Rest Runner TESTING ANGULAR COMPONENTS Consider the below angular component: app.component.ts app.component.spec.ts TESTING SERVICES Angular services contain UI-independent reusable business logic of the application. myservice.service.ts The spec file of this...

 RxJS: Reactive Extensions for JavaScript We need RxJS to handle asynchronous data easily  Asynchronous data: Data from HTTP response, data from a port, user click events, timer etc Observer and Observable Observer: RxJS object that emits data stream Observable: Entity that  is listening to the stream In order to initiate communication between data and listener in RxJS scope, first they need to be converted to "observer" and "observable" Observer subscribes to the observable to listen to the data stream Use of "subscribe:" Used to listen to the data stream OPERATORS Operators are small pieces of code that can be applied as pre-processing logic before data comes to the listener Summary of common operators: map:   used to manipulate responses from the API filter: used to filter values based on condition. Same as ES6 filter but this is for Observable merge:  This operator combines a number of observables streams and concurrently emits all values from ever...