Parameter Values
It is basically a callback function that will retrieve the following arguments:
- scope: This parameter represents the directive’s scope. You can use it to interact with the parent scope and manipulate data.
- element: This parameter represents the jqLite-wrapped element of the directive’s DOM. You can use it to modify the element’s properties and add event listeners.
- attrs: This parameter contains the attributes associated with the directive as key-value pairs.
- controller: It is an optional parameter that permits to retrieve the controller instances that are associated with the directive.
Approach 1: Using Linking Function to Manipulate Scope Data
In this approach, we will demonstrate how to use the linking function to interact with the directive’s scope and update data. Here, the basic HTML template declared that contains an <button> element with ng-mouseover and ng-mouseleave attributes, & calls the onHover() and onHoverOut() functions when the mouse hovers over and leaves the <button>. We then define two event handler functions, onHover() and onHoverOut().
- onHover(): This function is called when the mouse hovers over the <button>. It sets this.message to “Hovered!”, changing the displayed message.
- onHoverOut(): This function is called when the mouse leaves the <button>. It sets this.message back to “Not hovered.”, resetting the displayed message.
Example: This example illustrates the Linking function in Angular.
- app.component.html
HTML
<div> <button (mouseover)="onHover()" (mouseleave)="onHoverOut()"> Hover over me! </button> <div>{{ message }}</div> </div> |
- app.component.ts
Javascript
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { message: string = "Not hovered."; onHover() { this.message = "Hovered!"; } onHoverOut() { this.message = "Not hovered."; } } |
- app.module.ts
Javascript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Approach 2: Combining Pre-linking and Post-linking Functions
In this approach, we will combine the pre-linking and post-linking functions into a single function. Here, when the mouse Hovers over the element, the this.messageStyle.color will change the background color from light blue to yellow.
Example: This is another example that demonstrates the Linking Function by combining Pre-linking and Post-linking Functions.
- app.component.html:
HTML
<div customDirective> <button>Hover over me!</button> <div>{{ message }}</div> </div> |
- app.component.ts:
Javascript
import { Component, Directive, Input } from '@angular/core'; @Directive({ selector: '[customDirective]'}) export class CustomDirective { @Input() message: string; messageStyle: any = {}; constructor() { this.messageStyle = { color: 'black' }; } toggleColor() { this.messageStyle.color = this.messageStyle.color === 'yellow' ? 'lightblue' : 'yellow'; } } @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { } |
- app.module.ts:
Javascript
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent, CustomDirective } from './app.component'; @NgModule({ declarations: [ AppComponent, CustomDirective ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
output
What are the Types of Linking Function in Angular ?
When working with Angular directives, understanding the concept and types of linking functions is essential. Linking functions are a crucial part of the directive’s lifecycle, allowing developers to interact with the directive’s DOM element and scope. In this article, we will explore the different types of linking functions in Angular and how to use them effectively.
Contact Us