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.

Below is a common difference between them:

1 (change) is bound to the HTML onchange event. The documentation about HTML onchange says the following :

Source: https://www.w3schools.com/jsref/event_onchange.asp

2 — As stated before, (ngModelChange) is bound to the model variable bound to your input.

So, my interpretation is :

  • (change) triggers when the user changes the input
  • (ngModelChange) triggers when the model changes, whether it's consecutive to a user action or…


Part 1

I always used to prefer something like a newspaper which give enough information in a shorter span of time. Here, I create tips for day to day Angular development.

You might be doing angular development for a long time but sometimes you might be not updated with the newest features which can solve your issues without doing or writing some extra codes. This can cover some frequently asked Angular topics in interview.

Here I am coming with a new series to cover some tips which helped me in my day-to-day coding.

1.How to access key and value of object using *ngFor?

Angular Team has added a new built-in pipe for the same-named as keyvalue pipe to help you iterate through objects, maps, and arrays, in the common module of the angular package. …


Image for post
Image for post

In case you’re new to TypeScript, it’s a language that expands on JavaScript by adding linguistic structure for type revelations and explanations.

This syntax can be used by the TypeScript compiler to type-check our code, and then output clean readable JavaScript that runs on lots of different runtimes.

Static type-checking can tell us about errors in our code before we even run it, or before we even save our files thanks to TypeScript’s rich editing functionality across editors. …


Sort an array of objects by string property value in JavaScript and TypeScript

Image for post
Image for post

There are 5 different ways we can achieve the following functionality

1. Create dynamic functions

You can also create a dynamic sort function that sorts objects by their value that you pass:

function dynamicSort(property) {
var sortOrder = 1;
if(property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function (a,b) {
/* next line works with strings and numbers,
* and you may want to customize it to your needs
*/
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result * sortOrder;
}
}

So you can have an array of objects like…


1. insert method

You can implement the Array.insert method by doing this:

Array.prototype.insert = function ( index, item ) {
this.splice( index, 0, item );
};

Then you can use it like:

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');
// => arr == [ 'A', 'B', 'C', 'D', 'E' ]

2. splice method

arr.splice(index, 0, item); will insert item into arr at the specified index (deleting 0 items first, that is, it's just an insert).

In this example we will create an array and add an element to it into index 2:

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] =…

1. Native deep cloning

It’s called “structured cloning”, works experimentally in Node 11 and later, and hopefully will land in browsers. See this answer for more details.

If you do not use Dates, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types within your object, a very simple one liner to deep clone an object is:

JSON.parse(JSON.stringify(object))

const a = {
string: 'string',
number: 123,
bool: false,
nul: null,
date: new Date(), // stringified
undef: undefined, // lost
inf: Infinity, // forced to 'null'
re: /.*/, // lost
}
console.log(a);
console.log(typeof a.date); // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date); …


1. Removing item

let value = 3let arr = [1, 2, 3, 4, 5, 3]arr = arr.filter(item => item !== value)console.log(arr)
// [ 1, 2, 4, 5 ]

2. Removing multiple items

An additional advantage of this method is that you can remove multiple items

let forDeletion = [2, 3, 5]let arr = [1, 2, 3, 4, 5, 3]arr = arr.filter(item => !forDeletion.includes(item))
console.log(arr)
// [ 1, 4 ]

3. using splice

Find the index of the array element you want to remove using indexOf, and then remove that index with splice.

The splice() method changes the contents of an array by removing existing elements and/or adding new elements.


Image for post
Image for post

With the template-driven approach you basically apply directives, such as ngModel, in your template. Based on these directives Angular will create form control objects. This approach is good for building simple forms with basic validation (required, minlength, maxlength,…).

With the reactive approach you basically need to create new instances of the formcontrols and formcontrol groups in your component. Reactive forms are also the best choice for building more complex forms and are better in case you have the intention to implement unit testing for your forms.

Template Driven Form Features

  • Easy to use
  • Suitable for simple scenarios and fails for complex scenarios
  • Similar to…


  1. You can go to src/test.ts and can change the following line:

const context = require.context('./', true, /\.spec\.ts$/);

to

const context = require.context('./', true, /**yourcomponent.component**\.spec\.ts$/);

Image for post
Image for post

2. discovered that Jasmine allows you to prefix describe and it methods with an f (for focus): fdescribe and fit. If you use either of these, Karma will only run the relevant tests. To focus the current file, you can just take the top level describe and change it to fdescribe. If you use Jasmine prior to version 2.1, the focusing keywords are: iit and ddescribe.

This example code runs just the first test:

// Jasmine versions >/=2.1 use 'fdescribe'; versions <2.1 use 'ddescribe'
fdescribe('MySpec1', function () {
it('should do something', function () {
// ... …

First, you need to understand the relationships between components. Then you can choose the right method of communication. I will try to explain all the methods that I know and use in my practice for communication between components.

What kinds of relationships between components can there be?

1. Parent > Child

Image for post
Image for post

Sharing Data via Input

This is probably the most common method of sharing data. It works by using the @Input() decorator to allow data to be passed via the template.

parent.component.ts

import { Component } from '@angular/core';@Component({
selector: 'parent-component',
template: `
<child-component [childProperty]="parentProperty"></child-component>
`,
styleUrls: ['./parent.component.css'] …

About

Atit

Writing about Angular,JavaScript and Type Script related articles. Please follow, clap stories to motivate us writing more!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store