Tag: angular
-
How to add confetti to your Angular Project?
To add confetti to your angular project , follow the below steps: STEP 1: Install party.js STEP 2: Invoke method from your angular template on (click) method and pass $event.target as a parameter: A sample template: app.component.html: STEP 3: Import party object from party-js library inside the model class: STEP 4: Call party.confetti() method inside…
-
How to focus on a text box/html element again after user interaction in Angular?
Let’s say you want to focus on a html element as soon as user does something on your angular app. May be you want user to fill a set of fields and then on clicking submit button bring back the focus on the first field. How to do this? STEP1: Declare template variable name for…
-
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 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/)…
