Category: fullstackdevelopment
-
How to create a custom element (HTML tag) in HTML?
Until HTML5 , reusing a piece of html code was not straightforward. Thanks to HTML5 , web components came into picture. Now you can create your own custom components and include them in your HTML code using custom tags. And you can reuse them anywhere else in your application by declaring the custom tags just…
-
How to communicate between Angular components using @ViewChild annotation
In the previous post I showed how to communicate between two angular components using local template reference. The drawback using that strategy is that you can’t reference the child component inside parent component’s typescript code. It can be referenced only inside the parent template. This can be overcome by using @ViewChild annotation. This will inject…
-
How to communicate between two components in Angular through template reference?
Angular allows component interaction in five ways: Through @Input annotation , a parent component can pass its values to a child component Through @Output annotation , a child component can pass its values and event to a parent component Through services, a child component can subscribe to events of the parent. Through template reference ,…
-
How to communicate between angular components through a shared service?
In the previous post I showed how to interact between angular components using @Input and @Output annotations. A parent component can pass data to child component using @Input annotation. A child component can emit an event (with data if required) to parent using @Output annotation The link is here : How do components communicate in…
-
How do components communicate in Angular and how to use @Input and @Output annotations?
There are five ways through which angular components can communicate with each other : Through @Input annotation Through @Output annotation Using local template reference. Using services Using @ViewChild annotation Lets look at @Input and @Output annotation use cases in this post. @Input annotation Say in one component you have a list of items. You create…
-
How to authenticate a user when both offline and online in Angular?
I am developing an offline first angular app using Pouch DB and Couch DB . The end user is a desktop user who wants to use the app even when not connected to the internet. I am using Pouch DB for local database and Couch DB for remote database. One of the difficulties in developing…
-
How to build Immediately Invoked Function Expressions in Javascript?
While I was exploring how to retrieve results from an asynchronous function in Angular , I stumbled upon a solution where the developer had used IIFE to retrieve the result : It looked like this : This was confusing at first. But after exploring IIFE the above code made sense. First lets deep dive into…
-
How to check user inactivity in Angular?
Lets say you want to alert the user if they remain inactive for a long time. Or you want to log the user out if they are inactive for a long time. How can you do that in angular? The below algorithm can be followed to achieve that: STEP 1: Define user inactivity : User…
-
How to update a pouch db document through Angular?
I start this post assuming you know how to integrate pouch db with angular . If not please refer this post : (How to integrate pouch db with angular?) Once pouch db is integrated you might want to update documents into pouch db through Angular . Here is how to do it: Step 1: Retrieve…
-
How to search documents in Pouch DB through Angular, based on specific field?
Through Mango queries. Pouch DB supports the feature of querying documents based on field values through a separate plugin and calls this feature as ‘Mango queries’. So the first step to avail this feature is to install it : Assumption : you have already installed pouch db and able to save documents( Refer : https://fullstackdeveloper.guru/2020/03/21/how-to-integrate-pouch-db-with-angular/)…
