In Angular 8, to transfer data from the parent component to the child component, we use the @Input decorator. The @Input decorator is one of the property decorators in angular. Now, Let’s look into the steps of how the @Input decorator works from the parent component to the child component. Prerequisites First, we need some prerequisites before proceeding. Like Minimal knowledge on angular. Any IDE like WebStorm, Intellij or Visual studio/code installed. Angular CLI must be installed. Nodejs must be installed. Steps Here, I explained steps to transfer data from the parent to child component. First create ... Read More

In this, we will learn how to get the data from the child component to the parent component. In angular 8, using @Output decorator and EventEmitter we can transfer the data from the child component to the parent component. Here, takes an example like in the child component we have an input field and button. Whenever the user clicks on the button parent components get to know about the input value from the child component. Let’s see how to do that. Prerequisites Knowledge on angular. Install node and CLI. Create a project. Create child and parent components using NPM ... Read More

In Angular, services are singleton objects which normally get instantiated only once for the entire angular application. Every service contains several methods and that includes some functionality to do. It is a mechanism to share functionality or responsibility within one or more than components. We know, using Angular we can create nested-based component. Once our applications are nested, we may need to use the same functionality. Instead of writing same code in multiple components. We can write one place and we can share data with different components. The best way to use service to handle this. In first versions of ... Read More

The data in tables are basically repeatable. In AngularJS, a better way to display tables is the ng-repeat directive. The ng-repeat directive will help us to loop through the array data in the DOM elements and helps us to display tables very easily. Let’s check how to use ng-repeat for creating tables. Ng-repeat The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Syntax Here, to create tables follow given steps. Set ... Read More

In Angular, directives are one of the most important elements. Directives are building blocks like components in angular framework to build application. A directive used to modify the DOM by changing the appearance, behavior, or layout of DOM elements. Directives are used to provide or generate new HTML based syntax which will extend the power of the UI in an Angular Application. Each and every directive must have a selector same like a component. In simple words, every component in angular is a directive with the custom HTML template. In angular, we have directives to change the behavior or ... Read More

In AngularJS, events help us to perform particular tasks, based on the action. AngularJS is rich in events and has a simple model for adding event listeners to the HTML. AngularJS supports many events related to the mouse and keyboard. All these events are applied to the HTML elements. In angularJs, we have many HTML events. Suppose we write both AngularJS and HTML events simultaneously. AngularJS event and HTML event will be executed and AngularJS event will not overwrite the HTML event. Events can be represented by using directives. Like ng-click, ng-change, ng-mousedown, ng-mouseup, ng-keydown, ng-keyup, ng-keypress, ng-mouseover, ng-paste etc. ... Read More

The fabric.Text is used to change the corner style of a canvas-type text. Text class of Fabric.js provides text abstraction by using the fabric.Text class, which allows us to work with text in an object-oriented way. Compared to the canvas class the Text class provides the rich functionality. The text object contains the different properties, but to change the background color and rendering the text of canvas can be done using one of the color property i.e., textBackgroundColor. By defining the value for the color property we change the background color. Syntax The following is the syntax for the fabric.Text ... Read More

The Circle class of Fabric.js which is used to provide the circle shape by using the fabric.Circle object. The Circle object is used to provide the circle shape, and the circle is movable, and it can be stretched according to the requirements. For the stroke, color, width, height, and fill color the Circle is customizable. Comparing to the canvas class the Circle class provides the rich functionality. Here, we are using the backgroundColor property of Circle object for changing the background color of a canvas circle. We can change the background color by defining the value for the property. Syntax ... Read More

The fabric.Text object of Fabric.JS is used to change the corner style of a canvas-type text. Text class of Fabric.js provides the text abstraction by using the fabric.Text object, which allows us to work with text in an object-oriented way. Comparing to the canvas class the Text class provides the rich functionality. The text object contains the different properties, but to change the style of corner and rendering the text of canvas can be done using one of the style property i.e., cornerStyle. If the cornerStyle is default then it returns rect, otherwise the value is defined as a circle ... Read More

The fabric.Text object of Fabric.JS is used to change the corner style of a canvas-type text. Text class of Fabric.js provides the text abstraction by using the fabric.Text object, which allows us to work with text in an object-oriented way. Comparing to the canvas class the Text class provides the rich functionality. The text object contains the different properties, but to change the font-weight of a text canvas can be done using one of the font property i.e., fontWeight. The fontWeight property of a Fabric.js Text object specifies the weight or thickness of the text characters. It can be used ... Read More