Category: JavaScript

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.

Sometimes, we want to send data through routing paths in Angular.

In this article, we’ll look at how to send data through routing paths in Angular.

How to send data through routing paths in Angular?

To send data through routing paths in Angular, we call this.router.navigate with an object in the 2nd argument.

For instance, in the source route component, we write

this.router.navigate(["action-selection"], { state: { example: "bar" } });

in a method.

The data in the 2nd argument will be sent to the destination component.

Then in the destination component, we write

console.log(this.router.getCurrentNavigation().extras.state.example);

to call getCurrentNavigation to get the values from the object we call navigate with.

Conclusion

To send data through routing paths in Angular, we call this.router.navigate with an object in the 2nd argument.