5.5: Add Member Cards

We're just displaying a list of the usernames right now. Let's improve that by giving our members cards.

Add MemberCardComponent

In the root of your SPA project, run the following command to generate a component inside of the /members folder.

ng g c members/member-card --no-spec

Access User Data from Parent Component

Each card will hold the data and template of one individual user. We'll grab the data from the parent component.

Open the newly created member-card.component.ts file and add an input property for a user:

export class MemberCardComponent implements OnInit {

  @Input() user: User;

  constructor() { }

  ngOnInit() {
  }

}

That's all we'll need here for now.

Member Card Template

Next, we'll add the styling for our cards.

Open member-card.component.html and add the following layout:

Add Member Cards to the Member List Template

Now, we need to update our MemberList to use our cards instead of just our paragraphs with usernames.

In member-list.component.html, move the *ngFor into the parent <div> and replace the paragraph element with <app-member-card>, passing in the user as the input property.

<div class="container">
  <div class="row">
    <div *ngFor="let user of users" id="card" class="col-xl-2 col-lg-3 col-md-6">
      <app-member-card [user]="user"></app-member-card>
    </div>
  </div>
</div>

It's starting to come together!

LoadingUserCards

It still could use some more styling, though. We'll work on that next.