Video Course

Routing Angular v2+ Applications: Lesson 7 of 23

About Users

Up Next

About User Component

Autoplaying in 7 seconds!


Create a Free Account to Watch

Sign Up Now

Login to your account

We'll be bringing in users into the AboutComponent.

We'll need to create a class for User and create an array of users.


import { Component } from '@angular/core';

export class User {
  id: number;
  name: string;
  username: string;
  avatar: string;

const users: User[] = [
    id: 1,
    name: 'Chris',
    username: 'sevilayha',
    avatar: ''
    id: 2,
    name: 'Nick',
    username: 'whatnicktweets',
    avatar: ''
    id: 3,
    name: 'Holly',
    username: 'hollylawly',
    avatar: ''

  selector: 'about-page',
  styles: [`
    .profile-card   {
      background: #f3f3f3;
      border-radius: 4px;
      padding: 30px;
      text-align: center;
    .profile-card img  {
      max-width: 50%;
      margin: 15px auto;
  template: `
    <div class="row" *ngIf="users">

      <div class="col-sm-4" *ngFor="let user of users">
        <div class="profile-card">
          <img [src]="user.avatar" class="img-responsive img-circle">

          <h2>{{ }}</h2>
          <p><a href="#">{{ user.username }}</a></p>

export class AboutComponent {
  users: User[] = users;

Chris Sevilleja

157 posts

Co-founder of Slapping the keyboard until something good happens.