Posted on: November 16, 2021 Posted by: rahulgite Comments: 11

GRPC – Remote Procedure Call (RPC)

Inter-service communication Modern software applications no longer reside in a monolith today.  This big block of code, which is the monolith, is divided into smaller units, which are independent and autonomous.  They can be efficiently maintained and they are highly scalable.  the messages can be passed within services in a synchronous or an asynchronous fashion. Asynchronous message passing is when you place messages in logical queues so that the services can pick them up in the background and carry on with their further processing.   Inter-service communication has evolved Remote Procedural Call.  In this, the client invokes a procedure on the server…

Loading

READ MORE
angular and primeng
Posted on: November 15, 2021 Posted by: rahulgite Comments: 11

Pagination in Angular Material and Prime NG

Pagination in Angular Material and Prime NG against 20k records Prime NG Angular Material 34 ms Loading 1650 ms Scripting 57 ms Rendering 2 ms Painting 320 ms System 13 ms Loading 168883 ms Scripting 103 ms Rendering 7 ms Painting 446 ms System Prime NG works very well with pagination, no matter the number of records available for pagination. Angular Material takes the same amount of time as it would take for rendering 20k records. So page loading time increases as the number of records available for pagination. Best Not good. Need to check more if this is…

Loading

READ MORE
angular and primeng
Posted on: November 11, 2021 Posted by: rahulgite Comments: 17

PrimeNG vs Angular Material

More Angular Notes Angular Docs PrimeNG Vs Angular Material  PrimeNG Angular Material Reference Introduction PrimeNG is a UI component library that is created by Primark Informatics. Primark Informatics is a vendor with a lot of expertise and experience in developing open-source UI solutions. It is like a sibling to the PrimeFaces UI component library. The Widgets contained within the library are open-source, therefore are free to use under the MIT license. This library not only provides multiple free themes, but also a plethora of premium themes available with a lot more UI variations available for a…

Loading

READ MORE
Angular Validations
Posted on: November 9, 2021 Posted by: rahulgite Comments: 5

Form Validations in Angular

  ng-valid/ ng-invalid: This indicates whether form validations are passed. ng-touched/ ng-untouched: This indicates whether the form element is selected by the user or tabbed. ng-pristine/ ng-dirty: This indicates whether data in the element is modified. TS File Form validation Add a required attribute to HTML elements. Custom validation Create Boolean variables to store valid/ invalid status. Create valid functions which check the data validations. import { Route } from ‘@angular/compiler/src/core’; import { Component, Input, OnInit } from ‘@angular/core’; import { Router } from ‘@angular/router’; import { DataService } from ‘src/app/data.service’; import { User }…

Loading

READ MORE
Posted on: November 5, 2021 Posted by: rahulgite Comments: 15

Kafka Setup

Kafka set up problems. ===================== Zookeeper – java.net.BindException: Address already in use Something is already occupying your port 2181. Figure out which application it is and stop it Kafka – org.apache.kafka.common.KafkaException: Socket server failed to bind to 0.0.0.0:9092: Address already in use. Something is already occupying your port 9092. Figure out what it is and stop it. Otherwise, if you really insist, you can change the Kafka port by adding the following line to server.properties # example for port 9093 listeners=PLAINTEXT://:9093 My topics are losing their data after a while This is how Kafka works. Data is…

Loading

READ MORE
mock
Posted on: November 3, 2021 Posted by: rahulgite Comments: 11

Mock Implementation for DataServices in Angular

Data Service: Use Observable as a return type to get methods from rxjs, and create some mock data for models import { Injectable } from ‘@angular/core’; import { of } from ‘rxjs’; import { Observable } from ‘rxjs/internal/Observable’; import { Layout, LayoutCapacity, Rooms } from ‘./models/Room’; import { User } from ‘./models/Users’; @Injectable({ providedIn: ‘root’ }) export class DataService { rooms : Array<Rooms>=[]; users: Array<User>=[]; getRooms(): Observable<Array<Rooms>>{ return of(this.rooms); } getUsers(): Observable<Array<User>>{ return of(this.users); } constructor() { const room=new Rooms(); room.id=1; room.name=”Rahul”; room.location=”1st floor”; const layoutCap1=new LayoutCapacity(); layoutCap1.capacity=20; layoutCap1.layout=Layout.THEATER; const layoutCap2=new LayoutCapacity(); layoutCap2.capacity=50; layoutCap2.layout=Layout.BOARD; room.capacities.push(layoutCap1);…

Loading

READ MORE
Angular Routes
Posted on: November 3, 2021 Posted by: rahulgite Comments: 12

ActivatedRoute in Angular

ActivatedRoute helps us to get parameters from URL and then we can show or process the data accordingly. Add ActivatedRoute in constructor arguments. Use this.route.queryParams to access parameters as shows import { Component, OnInit } from ‘@angular/core’; import { ActivatedRoute, Router } from ‘@angular/router’; import { DataService } from ‘src/app/data.service’; import { Rooms } from ‘src/app/models/Room’; @Component({ selector: ‘app-rooms’, templateUrl: ‘./rooms.component.html’, styleUrls: [‘./rooms.component.css’] }) export class RoomsComponent implements OnInit { rooms:Array<Rooms>=[]; selectedRoom!:Rooms; constructor(private data:DataService, private route:ActivatedRoute, private nav:Router) { } ngOnInit(): void { this.rooms=this.data.rooms this.route.queryParams.subscribe(params => { const id=params[‘id’]; if(id){ this.selectedRoom=this.rooms.find(room => room.id===+id)!; } }); }…

Loading

READ MORE
Nullish Coalescing
Posted on: November 3, 2021 Posted by: rahulgite Comments: 12

Nullish Coalescing in angular

Nullish Coalescing: a logical operator that returns the value on the RIGHT-hand side when the left-hand side is null or undefined. <h1> {{title ?? “Title not available”}} </h1> Optional Chaining + Nullish Coalescing Consider a Person has address attributes: street, city, pin incase street is undefined or null we need to show city and then pin. {{person?.street?.city?.pin}} More Angular Notes Angular

Loading

READ MORE
Angular Routes
Posted on: November 3, 2021 Posted by: rahulgite Comments: 12

Angular Routing

Angular Routing Create a component if you need to set routing for the new component. Go to /app.modules.ts file. create new variable routes above @NgModule decorator as below const routes=[ { path:”admin/users”, component:UsersComponent } ] now scroll down and add an entry of RoutersModule in the import imports: [ BrowserModule, RouterModule.forRoot(routes) ] Even though you have added routes, angular will still load index.html. To show component according to URL we need to include <router-outlet> in /app.component.html <div clas=”container”> <app-menu></app-menu> <router-outlet></router-outlet> </div>   Now we are all set. hit the path/route you configured. In component, HTML…

Loading

READ MORE
Angular Debugging
Posted on: November 2, 2021 Posted by: rahulgite Comments: 6

Angular Debugging in Visual Studio Code

Steps to start debugging angular application through Visual Studio Code Go to > Run > Add Configuration 2. Select Chrome from popup, it will create a file like below. Just change the port number to 4200 or any other port where your application is configured. 3. Create a breakpoint in code by clicking just before line no. or select line press f9 4. Go to > Run > Start debugging 5. It will create a new chrome window attached to VS code. Also VS Code will show small panel with debugging options  

Loading

READ MORE