Template data binding 

Now that we have a service that connects to an API endpoint and receives a JSON file, let's make some small changes to our views, known as templates in the Angular world. The templates are the HTML files inside of the module folder:

1. Open src/app/app.component.html and remove all of the code before the <router-outlet></route-outlet> tags.
2. Open src/app/beers/beers.component.html and add the following code, right after the beers works paragraph:

<div class="row">
    <div class="col" href="" *ngFor="let item of beersList">
        <figure>
            <img [src]="item.image_url" [alt]="item.name" />
        <figcaption>
            <h1>{{item.name}}</h1>
                <p>{{item.tagline}}</p>
        </figcaption>
        </figure>
    </div>
</div>

Note that we are using the curly brace template tags ({{}}) and a *ngFor directive to display our data. Let's look at some Angular data binding types:

{{ some.property }} One way Binding
[(ngModel)]="some.value" Two way Binding
(click)="showFunction($event)" Event Binding

3. Now, we need to add some style to beers.component.html; open src/app/beers/beers.component.css and add the following code:

body {
    margin: 40px;
}
.row {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-gap: 10px;
    background-color: #fff;
    color: #444;
}
.col {
    background-color: #d1d1d1;
    border-radius: 5px;
    padding: 10px;
}
figure {
    text-align: center;
}
img {
    height:250px;
}

We are now very close to completing our example application. The last step is to build our application and see the final result.