Author: John Au-Yeung

Sometimes, we want to iterate over object in Angular.

In this article, we’ll look at how to iterate over object in Angular.

How to iterate over object in Angular?

To iterate over object in Angular, we can use the keyvalue pipe.

For instance, we write

<div *ngFor="let item of myObject | keyvalue">
  Key: <b>{{ item.key }}</b> and Value: <b>{{ item.value }}</b>
</div>

to loop through the entries in myObject by using the keyvalue pipe with *ngFor.

Then we get the key’s value from item.key and the value’s value with item.value.

We can also add a function to sort the keys before we do the iteration.

For instance, we write

<div *ngFor="let item of myObject | keyvalue: sortKeys">
  Key: <b>{{ item.key }}</b> and Value: <b>{{ item.value }}</b>
</div>

to sort the keys with sortKeys before we iterate.

In our component class, we define it with

sortKeys = (a, b) => {
  return a.key > b.key ? -1 : 1;
};

Conclusion

To iterate over object in Angular, we can use the keyvalue pipe.

Sometimes, we want to fix Angular not working in IE11.

In this article, we’ll look at how to fix Angular not working in IE11.

How to fix Angular not working in IE11?

To fix Angular not working in IE11, we need to add a few polyfills.

To add them, in polyfills.ts, we uncomment a few lines.

After uncommenting the lines, we should get something like

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';

in the file to enable all the polyfills for IE.

We should also downgrade our build target to es5 in tsconfig.json.

Conclusion

To fix Angular not working in IE11, we need to add a few polyfills.

To add them, in polyfills.ts, we uncomment a few lines.

Sometimes, we want to dynamically add event listener with Angular.

In this article, we’ll look at how to dynamically add event listener with Angular.

How to dynamically add event listener with Angular?

To dynamically add event listener with Angular, we can use the renderer.listenGlobal method.

For instance, we write

renderer.listenGlobal("document", "click", (event) => {
  // ...
});

to call renderer.listenGlobal with 'document', 'click' and an event handler to add the event handler as the event handler for the document‘s click event.

And then we can do what we want when the page is clicked in the event handler function.

Conclusion

To dynamically add event listener with Angular, we can use the renderer.listenGlobal method.

Sometimes, we want to fix Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ in Angular.

In this article, we’ll look at how to fix Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ in Angular.

How to fix Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ in Angular?

To fix Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ in Angular, we should add FormsModule and ReactiveFormsModule into the imports array.

For instance, in our app.module.js file, we write

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

to import the 2 modules from the @angular/forms module.

Then in the imports array, we write

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

and

imports: [
  FormsModule,
  ReactiveFormsModule
],

to add them to our app so we can use them.

Conclusion

To fix Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ in Angular, we should add FormsModule and ReactiveFormsModule into the imports array.

Sometimes, we want to use pipes in services and components with Angular.

In this article, we’ll look at how to use pipes in services and components with Angular.

How to use pipes in services and components with Angular?

To use pipes in services and components with Angular, we can use them directly.

For instance, we write

import { formatDate } from "@angular/common";

class MyService {
  constructor(@Inject(LOCALE_ID) private locale: string) {}

  transformDate(date) {
    return formatDate(date, "yyyy-MM-dd", this.locale);
  }
}

to create the MyService service.

And then we call formatDate directly after importing it in the transformData method.

We call it with the locale we injected to format the date.

Conclusion

To use pipes in services and components with Angular, we can use them directly.