Found 8894 Articles for Front End Technology

How to display tables using AngularJS?

Sravani Alamanda
Updated on 21-Feb-2023 18:14:43

2K+ Views

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

How to create custom directives in Angular 8?

Sravani Alamanda
Updated on 21-Feb-2023 16:53:04

290 Views

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

How to add event listeners in HTML using AngularJS?

Sravani Alamanda
Updated on 21-Feb-2023 16:47:58

3K+ Views

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

How to change background color of canvas-type text using Fabric.js?

Gungi Mahesh
Updated on 21-Feb-2023 16:17:32

560 Views

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

How to change background color of a canvas circle using Fabric.js ?

Gungi Mahesh
Updated on 21-Feb-2023 16:15:48

526 Views

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

How to change corner style of a canvas-type text using Fabric.js?

Gungi Mahesh
Updated on 21-Feb-2023 16:07:21

318 Views

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

How to change font-weight of a canvas-type text using Fabric.js?

Gungi Mahesh
Updated on 21-Feb-2023 16:02:16

323 Views

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

How to change character spacing of text canvas using Fabric.js?

Gungi Mahesh
Updated on 21-Feb-2023 15:59:57

526 Views

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 character spacing of a text canvas can be done using one of the property i.e., charSpacing. This property sets the spacing between characters in pixels. You can also use the setCharSpacing method to changing the spacing of ... Read More

How to Change the Background Color of a Div on Mouse Move Over using JavaScript?

Gungi Mahesh
Updated on 21-Feb-2023 15:51:24

3K+ Views

The mouseover event is used in the JavaScript code to change the color of background to an elements of HTML. We also want to restore the color to blue after removing our mouse from the element. As a result, we have also used the mouseout event. This will happen when we remove our mouse pointer from the element. getElementById() produces an object of element which represents the element whose id attribute matches the provided string. Because element IDs must be unique if supplied, they're a convenient method to rapidly retrieve a single element. The addEventListener() function is employed to ... Read More

How to create a function `generateSelector` to generate CSS selector path of a DOM element ?

Saurabh Anand
Updated on 21-Feb-2023 17:38:14

253 Views

The generateSelector method is a helpful tool for determining the path to a specific portion of a website known as a DOM element. Understanding how CSS selectors work and how to build them can be useful in a variety of situations, such as testing automation or the construction of shortcuts for easy element selection. We will discuss the function's concept and offered a clear example of how to use it in this article. Imagine you want to make a change to one specific element on a website. But how do you know what selector to use? That's where our ... Read More

Advertisements