Tech Seeker

In this article, we are going to understand the implementation steps on Jwt authentication in Ionic5 angular application. Here we mainly concentrate on authenticated user access token. What is JSON Web Token?: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A Sample Ionic Angular Application: Let's begin our journey by creating a sample Ionic Angular application where we are going to implement our JWT authentication. Command To Install Ionic CLI: npm install -g @ionic/cli Command To Create Ionic Tabs Structure APP: ionic start your_application_name tabs Command To Run Application: ionic serve Ionic Storage: The access token on receiving to our Ionic application we need to store it to use it in a subsequent request, the ideal choice for it to use Ionic Storage. Ionic storage provides an easy way to store key/value pairs and JSON objects. It has the capability of picking the

In Angular application, the Http request and response can be inspected and transform using the Interceptors. An application can configure multiple interceptors if needed. Each interceptor gets invoked for every Http request. Interceptor Flow: The Interceptors moto is to intercepts and handles an 'HttpRequest' or 'HttpResponse' Most interceptors transform the outgoing request before passing it to the next interceptor in the chain, by calling 'next.handle(request)'. An interceptor may transform the response event stream as well, by applying addition RXJS operators on the stream returned by 'next.handle()' More rarely, an interceptor may handle the request entirely and compose a new event stream instead of invoking 'next.handle()'. This is acceptable behavior, but keep in mind that further interceptors will be skipped entirely. It is also rare but valid for an interceptor to return multiple responses on the event stream for a single request. Let'

In this article, we are going to explore and implement a QR Code generator in the angular application using @techiediaries/ngx-qrcode library. QR Code: The quick response, or QR, Code is a two-dimensional version of the BarCode able to convey a wide variety of information almost instantly with the scan of a mobile device. An Overview On @techiediaries/ngrx-qrcode And It's Configurations: The @techiediaries/ngrx-qrcode is the angular library to generate a QR Code in an angular application. The 'NgxQRCodeModule' is QR Code angular module, that will be imported from the '@tehiediaries/ngrx-qrcode'. Using this library we can set up the QRCode generator angular component with basic configuration values. All the configurations are accepted as 'Input()' directive values of the QR Code component. Configuration input parameters are as follows: elementType - this input parameter is used to define the rendering type of QR Code whether like an Image or Canvas. cssClass

Ionic Action Sheet is a dialog that contains a collection of actionable buttons that display over the application. Here we are going to understand Ionic Action Sheet implementation in Angular. ActionSheetController And ActionSheetOptions: The main building blogs for developing Ionic Action Sheet can be like ActionSheetController ActionSheetOptions ActionSheetController is imported from the package '@ionic/angular'. ActionSheetController is injectable controller into our any of the ionic angular component through constructor injection. An ActinSheetController can create an n-number of action sheets within the components. ActionSheetController bundled with three main methods like create dismiss getTop create  method helps to instantiate or build the Ionic Action Sheet by taking ActionSheetOptions as input configuration. Ionic Angular create(action sheet create method) syntax: create(opts?: Opts): Promise<Overlay>; dismiss method helps to destroy the action sheet, it ta

Precap: Part-1: Angular Material Drag And Drop UI Component(Part-1) Part-2: Discussed on cdkDropListConnectedTo directive. Discussed on cdkDropListData directive. Discussed on transferArrayItem method. Discussed on cdkDropListGroup directive. Angular Material Drag And Drop UI Component(Part-2) cdkDropListEnterPredicate Directive: A predicate is a function that returns boolean results either true or false. cdkDropListeEnterPredicate directive accepts a predicate as an input. So on dragging and dropping of an item into a container will be accepted based on predicate output, if the predicate returns true dropped item will be accepted by the container or if the predicate returns false dropped item will be rejected by the container. So by using the cdkDropListEnterPredicate directive, we can control the items that will be dragged and dropped onto the container. Sample Example To Control Items Drag And Drop Using cdkDropListEnterPredicate Directive: Let's first implement a sample of dra