JavaScript Unscripted

When it comes to streams, there are 2 types: 1.        Data Stream: Mostly HTTP calls where you get a response to a request. And its complete!                 2.        Action stream: button clicks, drop down selections, check box selections etc where values are emitted continuously, you keep getting new values into a stream           Stackblitz links:           https://stackblitz.com/edit/angular-ivy-o41hzu           https://stackblitz.com/edit/angular-ivy-pdkt1s              https://stackblitz.com/edit/angular-ivy-hlt1u1  (get posts for user name entered) Consider you have 2 components: 1.        List Component: One to display the list of emails 2.        Detail Component: ...

Consider a parent & child component. Child receives “data” Object as Input from parent. Parent Child <div> <child [data]=”name”></child> </div>   name = { someKey: “someVal” }   <h1> {{ data.someKey }} </h1>   @Input data = {someKey: null}   Now if a button is introduced in Parent element to change the data of the @Input object present in child, Parent:   Parent   <div>   <child [data]=”name”></child>   <button (click)=”editData()”> edit </button> </div>   editData() { this.name.someKey = “new Value!” } Output:   New Value!   Edit      .       Using OnPush in child selector: ‘child’, template: `{{ data.someKey }}` changeDetection: changeDetectionStrategy.OnPu...

  Bridge pattern  decouple an abstraction from its implementation so that the two  can  vary independently. It is  used  mainly for implementing platform independence feature. It adds one more method level redirection  to  achieve the objective It enables the separation of implementation from the interface. It improves the extensibility. It allows the hiding of implementation details from the client. This approach simplifies code maintenance and minimizes the risk of breaking existing code. THE PROBLEM ·          Card-wrapper contains a common header and <ng-content> ·          Savings component has a refresh button [refresh() ] and loadSavingsData() <card-wrapper> <savings> </savings> </card-wrapper> ·          Similarly, Deposits component has a refresh button [refresh() ] and loadDepos...

S – Single Responsibility Ex: A component cannot have multiple widgets which can instead be made as a reusable component for future.   Instead of Do this app.component.ts <div> <!--Navbar -->   <nav>   <ul>     <li>Savings</li>     <li>Deposits</li>     <li>Loan</li>   </ul>   </nav>     <!--card to display savings account details -->   <div class="card-wrapper">       <div class="header">CITI BANK</div>     Account: AC29326262     Balance: 5000     Transactions avg: 3      </div>   </div>     <!--card to display deposits details -->   <div class="card-wra...