Krishan Dutt Sharma

Web Developer

My Blog

@Input() And @Output() Decorator In Angular

Introduction In this article, I am exploring two very important points, related to Angular 2 + version, which the part of Parameter Decorator and these points are called @Input and @Output decorators. Both are used to transform the data from one component to another component. Or, you can say pass the different types of data from parent to child component and child to parent component. Or, in a simple way transform/exchange data between two-component.Let's explore each, one by one. @Input Decorator @Input is a decorator to mark a property as an input. @Input is used to define an input property, to achieve component property binding. @Inoput decorator is used to pass data (property binding) from parent to child component. The component property should be annotated with @Input decorator to act as input property.

Read More

Create Custom Textbox In Angular 8 Using Input And Output Decorators

Input and Output decorators are used to pass values from one component to another component in Angular. Usually, Input parameters pass values from the parent component to child component and Output parameters are used to pass values from the child component to the parent component. We will create a child component as a custom textbox component and get values from parent component which uses this custom child component. We will use the same input parameter for getting model value from the custom component as well. For this, we will use an Output parameter with an event emitter variable as a string. We will use another input decorator for getting the maximum number of characters that custom textbox can accept. If we give zero as the maximum character length, the custom textbox will allow unlimited characters. We will write the logic for that inside our custom component. We will also provide one more input decorator to restrict numeric values inside the custom textbox if needed. We will write that logic as well.

Read More

Angular Data Binding

Introduction Data binding is one of the most important features in any language. It allows us to define communication (synchronization) between the model and view. Data binding is passed from component to view and from view to the component. Types of Data Binding in Angular String Interpolation: The type of one-way data binding where the text is between a set of curly braces often uses the name of a component property. The syntax of string interpolation is to use double curly braces {{code}}, also known as moustache syntax.

Read More

How To Use .filter() In Angular

In this blog, you are going to see how to use .filter() function in Angular. I will explain to you how it works with a simple example. You have an array containing multiple objects, each one representing an employee, but only want some of the objects in it. That’s where .filter() comes in.

Read More

Service Worker Enabled in an Angular Application

What is a Service Worker? Service Worker is a type of web worker. It is a client site programmable proxy between your web application & the outside world. Precisely, it’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages. As the worker runs separately from the main thread of the application, they are independent of the application they are associated with. This means the service worked will run in the background, even if you’ve closed the application tab.

Read More

Subscribe to my weekly newsletter