Angular Development Tips and Tricks
Tags: JavaScript, Angular, Front End Development, Interview, Typescript

Angular Development Tips and Tricks

Part 2

Here we go, Let’s read some common angular development tips and checklist to develop Angular application.

6. What is the difference between (change) vs (ngModelChange) in angular?

This is the most common question asked in an interview in a frontend development interview.

(change) basically bound to any input changes in the HTML.

We can add a method and it can be used easily.

<input (change)="changed()">

(ngModelChange) is the @Output of ngModel directive. It can be only used with ngModel and it fires when any changes happen to the model.

It can be used like this.

<input (ngModelChange)="changed($event)">changed(value) {

// do something with new value

}

Basically, it seems like there is no big difference between the two, but ngModel events gain power when you use [ngValue] .

<select [(ngModel)]="calue" (ngModelChange)="changed($event)" name="data">

<option *ngFor="let data of serviceData" [ngValue]="data">

{{data.name}}

</option>

</select>changed(value) {

// here comes the object as parameter

}

Let’s check if we haven’t used ngmodel.

<select (change)="changed($event)">

<option *ngFor="let data of serviceData" [value]="data.id">

{{data.name}}

</option>

</select>changed(e){

// event comes as parameter, you'll have to find selectedData manually

// by using e.target.data

}

7. How to create an object based on an interface file definition in TypeScript?

If you want to create a variable that will actually be an instance of IModal in TypeScript you will need to define it fully.

const modal: IModal = {

content: '',

val1: '',

val2: '',

}; const modal = {} as IModal;

8. How to scroll on top after navigation in Angular?

You can register a route change listener on your main component and scroll to the top on route changes.

import { Component, OnInit } from '@angular/core';

import { Router, NavigationEnd } from '@angular/router';@Component({

selector: 'my-app',

template: '<ng-content></ng-content>',

})

export class MyAppComponent implements OnInit {

constructor(private router: Router) { } ngOnInit() {

this.router.events.subscribe((evt) => {

if (!(evt instanceof NavigationEnd)) {

return;

}

window.scrollTo(0, 0)

});

}

}

9. In Angular, how do you determine the active route?

With the new Angular router, we can add a [routerLinkActive]="['your-class-name']" attribute to all your links:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Or the simplified non-array format if only one class is needed:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Or an even simpler format if only one class is needed:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

10. How do I check whether an array contains a string in TypeScript?

This is one of the common days to day tasks in front-end development.

Below are common patterns to check array contains a string.

var array: Array<string> = ['abc', 'cde', 'efg'];

The same as in JavaScript, using Array.prototype.indexOf():

The indexOf() the method returns the first index at which a given element can be found in the array, or -1 if it is not present.

console.log(array.indexOf('cde') > -1);

Or using ECMAScript 2016 Array.prototype.includes():

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

console.log(array.includes('cde'));

We can also use find, some, and filter.

Find

The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfies the testing function, undefined is returned.

Some

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Let’s understand what is this first from documentations.

const arr = [{val: 'abc'}, {val: 'abc'}, {val: 'cde'}];

console.log(arr.find(e => e.val === 'abc')); // {val: 'abc'} (first match)

console.log(arr.some(e => e.val === 'abc')); // true

console.log(arr.filter(e => e.val === 'abc')); // [{val: 'abc'}, {foo: 'bar'}]

References:

Are you preparing for interviews? Here are frequently asked interview questions in Angular. It covers the Latest interview questions for Angular and Frontend development. Let’s check how many of these questions you can answer?