How to bind to array in angular 11

Question

How do i bind to an array in angular 11? My variable looks like

const DISH = {
        id: '0',
        name: 'Uthappizza',
        image: '/assets/images/uthappizza.png',
        category: 'mains',
        featured: true,
        label: 'Hot',
        price: '4.99',
        // tslint:disable-next-line:max-line-length
        description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
        comments: [{
            rating: 5,
            comment: 'Imagine all the eatables, living in conFusion!',
            author: 'John Lemon',
            date: '2012-10-16T17:57:28.556094Z'
        }],
}

I can bin then name like

<h3>{{dish.name | uppercase}}</h3>

But how do i bind to the comments array?

why are there so many <br />s in the code? if this is an error, please remove them. — Clashsoft
– Clashsoft, Commented Nov 22, 2020 at 16:47

Roy · Accepted Answer · 2020-11-22 17:48:13Z

2

You can show the comments while using Angular's *ngFor loop, since it's an array (list) of comments. It's described in the Angular documentation how you can use it, it's basically a for loop in your HTML. Every item within dish.comments gets looped over and item.comment (referring to dish.comments.comment) gets printed in the paragraph element.

<h3>{{ dish.name }}</h3>

<ul>
  <li *ngFor="let item of dish.comments">
    <p>{{ item.comment }}</p>
  </li>
</ul>

If there are more comments, they will show up in the list. See this StackBlitz example for the code.

edited Nov 22, 2020 at 17:48

answered Nov 22, 2020 at 16:52

Roy

8,1295 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind to array in angular 11

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related