Working with data in Angular 8, part 1

This post is all about data in Angular. How do we give our apps data? What are all the different ways that data can be given to our apps? Find out here.

Just like with most of the examples here on codingexercises, we’ll begin with the completed example on Stackblitz so that you have an idea of what we’ll be building.

As usual, our starting commit is just the basic Angular 8 app on Stackblitz.

The simplest way to add data to the Angular starter app on Stackblitz

Photo by Samuel Zeller, @samuelzeller on Unsplash

To begin, let’s update our file structure.

We’ll get started by getting rid of the hello component from our default Stackblitz app.

That means we’ll make four minor changes to our starter app:

1. Delete src/app/hello.component.ts,
2. Delete import { HelloComponent } from './hello.component' from app.module.ts,
3. Delete HelloComponent from the declarations array inside app.module.ts, and
4. Delete <hello name="{{ name }}"></hello> from src/app/app.component.html

Here’s the commit after removing the hello component.

Now we can change the name property in our app.component.ts from a simple string to an object:

1
2
3
4
5
6
7
8
9
10
11
12
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = {
    name: 'Angular'
  }
}

We can now access our name object in app.component.html as follows:

1
2
3
<p>
  {{name.name}}
</p>

We can see the result here:

Now, let’s try adding a sentence.

We want to print out the following sentence: Angular is a framework.

Why not just add another property to our data object, call it type, and give it a value of "framework"?

Here’s the updated code of app.component.html:

1
2
3
<p>
  {{name.name}} is a {{name.type}}
</p>

Of course, we still need to update the class file of our app component, by expanding our object, as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = {
    name: 'Angular',
    type: 'framework'
  }
}

Now our app looks like this:

The commit at this point titled Output data object properties in an Angular template file.

Let’s now change our simple data object into a data array with two objects inside of it:

// ...code skipped for brevity...
export class AppComponent  {
  name = [
    {
      name: 'Angular',
      type: 'framework'
    },
    {
      name: 'React',
      type: 'library'
    }
  ]
}

Now, let’s try outputting the same sentence, “Angular is a framework”, again.

How do we do it?

We might try something like this in app.component.html:

1
2
3
<p>
  {{name.name[0]}} is a {{name.type[0]}}
</p>

Unfortunately, all we’ll see is an empty screen. If we looked at the console, we’d see the following errors:

ERROR
Error: Cannot read property '0' of undefined
ERROR
Error: Cannot read property '0' of undefined

What this means is that Angular doesn’t know of any name.name[0], or name.type[0], for that matter.

Let’s try something different:

1
2
3
<p>
  {{name[0].name}} is a {{name[0].type}}
</p>

This time, our template works, and shows the correct sentence!

The commit for the above code is titled Output object properties from an array of objects in Angular

Next, we’ll look at how to loop over our array of objects in Angular.

Looping over an array of objects with *ngFor

Directives are an interesting concept in Angular.

A directive is a function that is “disguised” as a custom HTML attribute. This function will run each time Angular’s compiler sees it in the DOM.

An example of a directive is *ngFor, and we use it to loop over data collections in our component HTML templates.

For example, let’s say we want to print out these two sentences:

• Angular is a framework
• React is a library

With *ngFor, this is a really simple thing to do:

<p *ngFor="let item of name">
  {{item.name}} is a {{item.type}}.
</p>

Here is the output of the code above:

This commit is titled “Loop over an array of object properties using the ngFor directive” and it’s available here.

That’s it for this article.

To access part 2 in this article series, click here!