Import & export in ES6/Angular

Introduction

When seeing for the first time Angular application, you may spot at the top of the components ‘import’ statements. This is due to the fact that Angular heavily relies on JavaScript ES6 and the ‘imports’ are part of it.

But what exactly ‘import’ means? To answer that question first we need to ask another one: what is ‘export’? ‘Export’ in JavaScript ES6 is way of saying ‘make this code available for other modules’. And with that knowledge we can answer the previous question, ‘import’ is the opposite of ‘export’ and it gets code from other modules. Another important thing to precise is what exactly ‘module’ is? Module is simply a piece of JavaScript code. Developers usually split code into different modules to keep code easy to maintain.

Coding and examples

With knowledge from introduction we’re ready to study some code. Let’s say we’ve got file called ‘functions.ts’ with (as file name said) three different functions.

function hello() {   console.log('Hello'); }  function goodbye() {   console.log('Goodbye'); }  function greeting() {   console.log('Greetings'); }

These are simple functions which basically just log in the browser console appropriate welcome word.

To use the first function in a component we need to add an ‘export’ word before the function statement.

export function hello() {   console.log('Hello'); }

And then we need to import that function in component.

import { hello } from '../functions/functions';

Now we can fire that function for example on the button click. So let’s add it in the component view.

<button (click)="sayHello()">Click to say hello!</button>

And in component logic.

sayHello() {   hello(); }

Finally in browser console ‘Hello’ text should appear. Well done! This method is called ‘named export’. When importing a ‘named export’, you need to import an ‘export’ by name in curly braces.

But what if you want to import another function from the ‘functions.ts’ file?

export function goodbye() {   console.log('Goodbye'); }

Then in a component just add the name of this function into curly bracers.

import { hello, goodbye } from '../functions/functions';

And you’re good to go.

sayGoodbye() {   goodbye(); }

Sometimes you may need to import all functions from a file. That won’t be a problem, in that case you should use.

import * as functions from '../functions/functions';  sayhello() {   functions.hello(); }  sayGoodbye() {   functions.goodbye(); }

* (asterisk) means all, then you need to assign it to the some alias, in that case it’s ‘functions’.

There’s one more export method – ‘default export’.

export default function greeting() {   console.log('Greetings'); }

When you don’t specify certain name (omit curly braces) of ‘import’, the ‘default export’ will be imported.

import greeting from '../functions/functions';  greetUser() {   greeting(); }

In the ‘default export’ you can use random alias for ‘import’.

import farewell from '../functions/functions';  greetUser() {   farewell(); }

This will fire the same function as previous example and log into browser console ‘Greetings’. Bear in mind that in one file there could be only one ‘default export’.

Conclusion

As you can see, ‘import’/’export’ is fairly straightforward stuff.  You just need to remember that there are different ‘export’ methods – ‘named’ and ‘default’. And keeping that in mind, ‘import’ statement will also differ. All depends what you want to be imported into a component.

Our mission is to support startups in achieving success. Feel free to reach out with any inquiries, and visit our blog for additional tips. Tune in to our podcast to glean insights from successful startup CEOs navigating their ventures.