Handling DOM level events in Angular with typescript
Building an webapp with <Angular 2, 4, 5> made easy, when compared to building with Vanila JS, jQuery. But there were some challenges that we do face while working with Angular Js or Angular. In those one of the main challenge is handling the DOM related events.
From Angular we got the ViewElementRef class to handle the DOM events, but this is concerned only to a single element. But to handle any element with its id with in the Angular code is also easy with out the ViewElementRef class.
The scenario where we cannot make use of ViewElementRef class is some thing where we are going to add the input controls or any components dynamically. To refer them, add or remove styles, add or remove events, add or remove attributes, the only approach that is easy is to access them with our old plain syntax:
document.getElementById(elementID)
Lets look at an example where in we have a group of textboxes as a table format and we have to highlight the border of the respective textbox on focus of the element. And also highlight should be removed when the control lost its focus.
Lets get on to the track in designing this app.
For app setup I am using Angualr cli, and generate a new component.
In the .html file add the below code:
<div>
<table>
<tr>
<th *ngFor=”let key of objectKeys(originalData[0])”>{{key}}</th>
</tr>
<tr *ngFor=”let item of originalData; let row = index;”>
<td *ngFor=”let key of objectKeys(item); let col = index;”>
<input type=”text” [ngModel]=”item[key]” id=”{{row}}_{{col}}” readonly (focus)=”focused($event)” (focusout)=”focusedOut($event)” />
</td>
</tr>
</table>
</div>
In the component.ts file add the following the changes:
import {FormsModule} from ‘@angular/forms’;
@Component({
selector: ‘my-app’,
templateURL: ‘XXXXXXX.html’,
styleSheetsURL: ‘XXXXXX.css’
})
export class App {
originalData: string;
objectKeys = Object.keys;
constructor() {
this.originalData = [
{
“userId”: 1,
“id”: 1,
“title”: “sunt aut ”,
“body”: “quia et suscipit”
},
{
“userId”: 1,
“id”: 1,
“title”: “sunt aut ”,
“body”: “quia et suscipit”
},
{
“userId”: 1,
“id”: 1,
“title”: “sunt aut ”,
“body”: “quia et suscipit”
}];
}
focusedOut(event: any):void {
var elemId = event.explicitOriginalTarget.id;
document.getElementById(elemId).classList.remove(‘focused’);
}
focused(event: any):void {
var elemId = event.explicitOriginalTarget.id;
document.getElementById(elemId).classList.add(‘focused’);
}
}
In the .css file add the below css rule:
.focused {
border: 1px solid blue;
}
tr, td, th {
border: 1px solid black;
}
And you can find the plunker for the above discussed scenario: https://embed.plnkr.co/5u3JdjvYrOmnYfAsrz8j/
Lets discuss on the typescript code here, if you observe at the code there were 2 functions focused() and focusedOut() were designed to highlight and remove the highlighting on the element that is focused.
In every we are trying to access the element with its ID, here ID was framed dynamically.
