HTML classes are global attributes that are used by HTML tags to specify a list of classes that are case-sensitive in nature. These classes are then used by CSS, to apply styling to that particular tag that has the class, and by Javascript, to manipulate the HTML element’s behavior, interactivity, or styles. Approach 1; Using the dot(.) selector In this approach, we will simply use the dot (.) selector to select multiple elements having the same class names, and apply the same set of styles to them using CSS. Example In this example, we will select a “p” tag and ... Read More

First, we look into what filters in angularjs and then how to use them. Filters are used to format the value of an expression to display on the UI to the user without changing the original format. Filters will be added to an expression using the pipe | operator. Like, {{expression | filterName}} Angularjs provides some built-in filters to format the data. Like, as currency, uppercase, lowercase, number, orderBy, limitTo, json, filter, and date. Now, we look into how to use them in our code using angularjs. AngularJS Currency Filter This filter is used to format the data into ... Read More

Directives in Angular 8, are classes that can add new behavior to the elements in the template. Directives are used to manipulate the DOM. We can change the behavior and appearance of the DOM elements using directives. Simply we can use the HTML using directives. Using directives, we can achieve reusability, readability and maintainability. Directives will give the high-level of reusability throughout the application. This will help in large application like same functionality required by many places. There are 3 types of directives − Component directives Attribute directives Structural directives We can also create custom directives based on ... 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 components. 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

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