How to create @Directives in Angular

Angular - How to create @Directives in Angular , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE

 Directives in Angular

What is Directive?

  • The directive is markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Types of Directive

There are 4 type of Directives listed below
  • Components directives : It is mainly used to specify the HTML templates. It is the most commonly-used directive in an Angular project. It is decorated with the @component decorator e.g. app.component
  • Structural directives : The structural directive is used to add or remove the HTML Element in the Dom Layout e.g. *ngIf , *ngFor .. etc
  • Attribute directives : The Attribute directives is used to change/modify apearance of DOM element *ngClass , *ngStyle .. etc
  • Custom Directive : The Custom Directive is created by a developer based on requirement

Advantage of using Custom Directive

it is vulnerable to XSS attacks when we directly use ElementRef in our application. It is better to create a custom directive and use ElementRef inside directive to change appearance or behavior of the host element.

HostListener & HostBinding

  • HostListener : This is a function decorator that accepts an event name as an argument. When that event gets fired on the host element it calls the associated function.
  • HostBinding : This is a function decorator that accepts a css style as an argument.

Let's create one custom directive based on our requirement to understand it better

Requirement : Create a directive which will increase and decrease font size of DOM element on mouse enter and hover and will also change its background color

Let's follow below step to full fill the requirement

  • Step 1: Create a new Projet using command ng new Directive-Angular
  • Step 2: Create a custom direct using command ng g directive TextTransformation
  • Step 3: Place below code in app.component.html <h2 apptexttransformation=""> Hover on me </h2>
  • Step 4: Place below code in text-transformation.directive.ts fontSize: string; @HostBinding('style.background-color') background: string; constructor(private elementRef: ElementRef) { } @HostListener('mouseenter') onMouseEnter() { this.background = 'pink'; this.fontSize = '50px'; this.IncreaseFontSize(); } @HostListener('mouseleave') onMouseLeave() { this.background = 'yellow'; this.fontSize = '12px'; this.IncreaseFontSize(); } private IncreaseFontSize() { this.elementRef.nativeElement.style.fontSize = this.fontSize; }
  • Step 5: You are ready with the code use ng serve and hit enter key. open your browser on http://localhost:4200/ it will start working

Ref Link

Comments

Post a Comment

Popular posts from this blog

React Native Fundamentals

Image
React Fundamentals, ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   React Fundamentals React Native runs on  React , a popular open-source library for building  user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course   Here, we will learn how to create a simple Hello World in react native   Let’s create a simple application of React Native We will follow the below command to create a Hello Worlds in React Native   Use below command to install React native ·       npm install –g react-native-cli   The above instructions work best if you need to build native code in your application or want to integrate React Native in an existing application. If you want to quickly prototype an application and you can use  Create React Native App  module th...
Read more

Get unique values from Array in Angular

Get unique values from Array in Angular , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   In this article, we will learn how to remove duplicate items from Array in Angular Playing with the array is very common in any programming language. Very often we faced a situation where we need to remove duplicate items from Array. so here we will learn 3 different ways to remove duplicate items from Array Step 1 : By using Set   GetUniqueItemsBySets() { this.uniqueItemsbySets = [...new Set(this.duplicateArray)]; }     Step 2 : By foreach   GetUniqueItemsByForeach() { this.duplicateArray.forEach(items =&gt; { if (!this.uniqueItemsbyForeach.includes(items)) { this.uniqueItemsbyForeach.push(items); } }); }     Step 2 : By filter   GetUniqueItemsByfilter() { this.duplicateArray.filter(items =&gt; { if (this.uniqueItemsbyfilter.indexOf(items) === (-1)) {...
Read more

Logging and Error Handling | Exception Handling

Image
Logging and Error Handling | Exception Handling , ANGULAR WITH CORE .NET AND MVC RAZOR ENGINE   Logging and Error Handling | Exception handling Mechanism Application logging plays a crucial role in tracking and identifying issues that may  surface as well as in providing useful insights into the workflow processes of solutions. When things go wrong, one of the first sources to look at is the application’s log. Depending on the number of details that are logged, each entry represents an action that occurred at a specific date and time. Logs can contain system-generated events as well as events explicitly defined by the developer and are usually grouped into categories like errors, informational, and warning. Application logs are application-specific, hence the name, and do not often include OS-specific events. Let's begin Adding Logging  Logging can be used anywhere in ASP.NET Core, and to create a log we merely need to...
Read more