Tech Seeker

In this article, we are going to understand GraphQL Subscriptions in an angular application using the Apollo Angular Library. Graphql Subscription: GraphQL subscriptions are a way to push data from the server to the clients that listen to real-time messages or payload or data from the server. Subscriptions are similar to queries in that they specify a set of fields to be delivered to the client, but instead of immediately returning a single response, a result is sent every time a particular event happens on the server. So for this demo, I have created a GraphQL endpoint in .Net5. So I'm going to use that as my server. Publisher: Subscriber: So above 2 images like 'Publisher' and 'Subscriber' are tested using the browser. Now we will implement those publisher and subscriber functionalities into the angular application. Create An Angular Application: Let's begin our demo by creating an angular sample application. Command To Install Angular CLI:(If not insta

In this article, we will learn about consuming GraphQL API from angular applications using the Apollo Angular library. Overview On GraphQL API: As a front-end developer, no need to understand about in-depth nature of the GraphQL API. But it will be good to know about few key features about it for development. GraphQL API mostly has a single endpoint. So data fetching or updating will be carried out by that single endpoint. For posting data or querying data, we have to follow its own syntax. GraphQL carries two important operations: Query - fetching data Mutation - updating or saving data. Create A Sample Angular Application: Let's create a sample angular application where we are going to implement techniques to consume the GraphQL endpoint. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Apollo Angular Library: Apo

In this article, we will know about implementing a user rating component in the angular applications using the 'NgBootstrap' library. Key Features Of NgBootstrap Rating Component: max -   The 'max' input property to define the max number of rating icons or images(eg:  stars that represent rating). By default, the 'max' input property value is 10. rate - The 'rate' input property to define the current rating value. The 'rate' input value can take either number or decimal value. readonly - The 'readonly' input property is of boolean type. If it is set to 'true', then the user can't add a rating this rating only used for display purposes. hover - The 'hover' event raises on mouse hovering. leave - The 'leave' event fires on a mouse moving from the rating component. rateChange - The 'rateChange' event raises when the user clicks on a new rating. Create An Angular Sample Application: Let's implement

In this article, we will implement the steps to fetch the user IP Address and Geolocation in an angular application. Third-Party APIs: The API to get users IP Address endpoint: https://jsonip.com/ Free endpoint, for official docs, visit "https://getjsonip.com/#docs". The API to get users Geolocation based on users IP Address endpoint: http://api.ipstack.com/User_IP?access_key=your_api_key&format=1 This endpoint has pricing subscription plans including the free subscription plan, for official docs, visit: "https://ipstack.com/" Create An Angular Sample Application: Let's implement an angular sample that will display users' IP Addresses and Geolocation by using third-party APIs. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Import HttpClientMoudle: Let's inject the 'HttpClientMoudle

In this article, we will understand the process to generate the HTML to PDF using 'ngx-print' library in Angular. An Overview On ngx-print Library: This library works based on directives. These directives make the printing HTML to PDF very easily with smooth transitions. The key terms of this library are: NgxPrintModule ngxPrint(Directive) printSectionId(Input Property) printTitle(Input Property) printStyle(Input Property) useExistingCss(Input Property) styleSheetFile(Input Property) Create A Sample Angular Application: Let's create a sample angular application where we are going to implement logic to use 'ngx-print' library. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Print Npm Package: Command To Install Print Package npm install ngx-print After installing the npm package reference will be

In this article, we are going to explore the device detection library 'ngx-device-detector' in the angular application. An Overview On ngx-device-detector Library: This library is useful to identify a browser, device type, request user agent, etc. This library is also compatible with the angular AOT compiler. Library provides us angular injectable service like 'DeviceDetectorService'. This service provides methods like: getDeviceInfo isMobile isTablet isDesktop Create A Sample Angular Application: Let's create a sample angular application to understand the 'ngx-device-detector' library. Command To Install Angular CLI:(If not installed on your system previously) npm install -g @angular/cli Angular CLI Command To Create Angular App: ng new your_project_name Command To Run App: ng serve Install Device Detection Npm Package: Command To Install Device Detection Package npm install ngx-device-detector --save After installing npm package reference will be au

In  Part-1  we have implemented steps for jwt authentication in angular application. This is a continuation of  Part-1 , our main goals here to use the access token as a key for authorization header to access secured endpoints and refresh token to re-issue the access token on the expiration. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Authorization Header To Access Secured Endpoint: Now let's try to consume the secured 'Todos' endpoint by adding the access token to the request header. Let's create a 'Todos' service. src/app/services/todos.service.ts: import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class TodosService{ constructor(private http:HttpCl