Category: angular
-
How to configure sensitive configuration details in your Angular app without being visible to the front end user?
Often in your angular app you need to configure sensitive data like credentials. You can store this in your code but then it will be visible to any one who loads your angular app in their browser. You can store it in a config file under assets directory , still it might be exposed to…
-
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 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…
