CODEWITHSUNDEEP
angularmat-list
Venkat
Venkat

Reputation: 89

mat-list to display multiple items

I have a typescript file containing constant data as below:

export const HELPERS: Helper[] = 
[
    {
      id: '0',
      name: 'Joan',
      image: '/assets/images/img.png',
      designation: 'Chief',
      abbr: 'TO',      
      description: 'testing data'
    }, 
// few more items
];

I am trying to iterate through these contents and showcase in my component.html using the mat-List. I am trying to show image on the left, name below that description . Like this for all the data defined in constant. I tried like this, but not getting any result. 

<div fxFlex>
    <h2>Helpers</h2>
    <mat-card *ngIf="helper" fxFlex></mat-card>
    <mat-list>     
      <mat-list-item *ngFor="let helper of Helpers">
        <img matListAvatar src="{{helper.image}} " alt="...">
        <h3 matLine> {{helper.name}} </h3>
        <p matLine>
          <span> {{helper.abbr}} </span>
          <span class="demo-2"> -- {{helper.description}} </span>
        </p>
      </mat-list-item> 
     </mat-list>
  </div>

How to show the data one below another in mat-List option ?

Update1: I have a class called Helper in a file named helper.ts . I have created a new constant called HELPERS based on the Helper class in a file named Helpers.ts and exported it, Create a new service named helper that provide the details of the helpers . I am able to get the data for a single person data , if I tried this way:

<mat-card *ngIf="helper" fxFlex>
  <mat-card-header>
    <div mat-card-avatar></div>
    <mat-card-title>
      <h3>{{helper.name | uppercase}}</h3>
    </mat-card-title>
  </mat-card-header> 
</mat-card>

The problem here is the looping, which I am not able to get correctly.

Upvotes: 0

Views: 1964

Answers (2)

Damir Varevac
Damir Varevac

Reputation: 361

Maybe you want to add a property named Helpers in your component ts file that is used in the ngFor: 

Helpers: Helper[] = HELPERS;

Upvotes: 1

emihud
emihud

Reputation: 158

HTML code is correct, but in your typescript the constant HELPERS should be named "Helpers". It is case sensitive.

Also don't forget to import MatListModule from @angular/material/list in your appmodule.

Upvotes: 0

Related Questions