Category: Angular

Sometimes, we want to avoid error if don’t check if {{object.field}} exists with Angular.

In this article, we’ll look at how to avoid error if don’t check if {{object.field}} exists with Angular.

How to avoid error if don’t check if {{object.field}} exists with Angular?

To avoid error if don’t check if {{object.field}} exists with Angular, we can use the safe navigation operator in our template.

For instance, we write

{{ category?.name }}

to add the safe navigation operator with ?..

Then we don’t have to check if category is defined before we try to get its name property.

If the object is an array, then we check if it’s defined with

{{ records && records[0] }}

where records is an array.

We can also use the safe navigation operator with the async pipe with

{{ (chapters | async)?.length }}

where chapter is a promise or observable.

The safe navigation operator works with ngModel.

To use it, we write

<input
  [ngModel]="details?.firstname"
  (ngModelChange)="details.firstname = $event"
/>

to bind to details?.firstname with ngModel and ngModelChange.

Conclusion

To avoid error if don’t check if {{object.field}} exists with Angular, we can use the safe navigation operator in our template.

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.