Get about -> title and about -> images -> name from my local .json file - arrays

Question

I want to show all images in my app.component.html file using *ngFor loop.
This is my app.component.html
<app-nav></app-nav>
<div class="container mt-4">
<router-outlet></router-outlet>
</div>
<ul>
<li *ngFor="let users of Users">
<h2>{{users.name}}</h2>
</li>
</ul>
This is my data.json
{
"about": {
"title":"STORY ABOUT US",
"subtitle":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et",
"images":[
{
"name":"aa1.jpg",
"id":1,
"link":"http://google.com/",
"icon":"fa fa-link"
},
{
"name":"aa2.jpg",
"id":2,
"link":"http://google.com/",
"icon":"fa fa-link"
}
]
}
This is my app.component.ts
import { Component } from '#angular/core';
import sampleData from '../assets/data.json';
#Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
export class AppComponent { Users: any = sampleData; }

Answer 1

Given your JSON data the component template should look like the following:
<h1>{{users.about.title}}</h1>
<ul>
<li *ngFor="let image of users.about.images">
{{image.name}}
</li>
</ul>
You want to loop over the iterable in your JSON data which is the images property and that is what *ngFor allows.
See a working stackblitz demo I made with the above description.
Note I used the property name users lowercase, instead of Users uppercase, as it is a more common convention, but still an opinion.

Answer 2

you can access your object property using two ways
1
object.propertyName
2
object['propertyName']
so import your json file into your object and access its properties like that
<li *ngFor="let users of Users">
<h2>{{users.name}}</h2>
<h2>{{users.title}}</h2>
<h2>{{users.image.name}}</h2>
<h2>{{users.image.id}}</h2>
</li>