Geekswithblogs.net

Originally posted on: http://geekswithblogs.net/HumpreyCogay/archive/2016/07/18/attribute-directives.aspx

Previously we started creating our seed project then we created our first AngularJS2 app, on this post we will try to play with AngularJs2’s Attribute Directives.

Basically, Attribute Directives allows us to change the appearance or behavior of a DOM Element, such us changing colors of DIVS when our mouse enters or exits, or alter the behavior of a DOM element when clicking them.

For this Post, We will use the current state of the project we used on our last post, you can go back to my previous posts if you still haven't done so.

AngularJS2 on ASP.Net Core using TypeScript Part 1
AngularJS2 on ASP.Net Core using TypeScript Part 2

Target Output



Table of Procedures

1. Update main.scss
2. Create app.component.html
3. Create highlight.directive.ts
4. Update app.component.ts
5. Test our Application

Procedures

1. Update main.scss

First, We need to add a base class for our boxes.

$font-stack: Arial, Helvetica, sans-serif;
$primary-color: #336699;
$font-size:250%;
$margin:2em;

h1 {
font: $font-size $font-stack;
color: $primary-color;
}

body {
margin: $margin;
}

.boxes {
display: inline-block;
position: relative;
float: left;
margin: 10px;
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
line-height: 100px;
border: 1px #000000 solid;
}

2. Create app.component.html

On our last project we hardcoded our HTML code on our component’s template property,



For this project we will use an external html file as a template, first create a HTML File under wwwrooot\app\, let’s name this file app.component.html.

Copy and paste the codes below, for now take note of [myHighlight]="color" and [defaultColor]="'violet'". We will get these values from our components once we created our custom Directive.

<h1>Welcome to the world of Directives</h1><br />
<div>
<input type="radio" name="colors" (click)="color='lightgreen'">Green
<input type="radio" name="colors" (click)="color='yellow'">Yellow
<input type="radio" name="colors" (click)="color='cyan'">Cyan
</div>

<div class="boxes" [myHighlight]="color">Apple</div>
<div class="boxes" [myHighlight]="color">Bat</div>
<div class="boxes" [myHighlight]="color" [defaultColor]="'violet'">Cat</div>
<div class="boxes" [myHighlight]="color" [defaultColor]="'violet'">Dog</div>
<div class="boxes" [myHighlight]="color" [defaultColor]="'violet'">Elephant</div>
<div class="boxes" [myHighlight]="color" [defaultColor]="'violet'">Frog</div>
<div class="boxes" [myHighlight]="color" [defaultColor]="'violet'">Girrafe</div>
<div class="boxes" [myHighlight]="color" [defaultColor]="'violet'">Hippopotamus</div>

3. Create highlight.directive.ts

Create a new TypeScript file under our projects APP Folder(not the wwwroot/app folder) and copy and paste the complete codes at the end of this step/procedure.

What’s note worthy here is the @Directive decorator, this will locate all elements on our template HTML that has the [myHighlight] attribute and will inject our Directives capabilities.

We will also have @Hostlistener’s which will allow us to catch the MouseEnter and MouseLeave and insert what we want our Directives to do, on this case we will change the style.backgroundColor of our DIVS.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
selector: '[myHighlight]'
})

export class HighlightDirective {
private _defaultColor = 'red';
private el: HTMLElement;

constructor(el: ElementRef) { this.el = el.nativeElement; }

@Input() set defaultColor(colorName: string) {
this._defaultColor = colorName || this._defaultColor;
}

@Input('myHighlight') highlightColor: string;

@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor || this._defaultColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('inherit');
}

private highlight(color: string) {
this.el.style.backgroundColor = color;
}
}

4. Update app.component.ts

Now we need to update our app.component.ts so we could use the HighlightDirective we created on step no 3. what’s note worthy here is we change the template:  to templateUrl and we told our app.component to use our newly created [HighlightDirective]

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [HighlightDirective]
})
export class AppComponent {
constructor() {
var test = null;

}
}

5. Now you can press F5 to run our application.

If no option is selected it will apply our default color indicated on our Directive

private _defaultColor = 'red';



For the boxes that has the [defaultColor] Attribute, the color indicated on the attribute will be used.

If the user selected a Color, our directive should be able to pick that up and apply it to our DIVs

References:

https://angular.io/docs/ts/latest/guide/attribute-directives.html

Please feel fee to comment . . .