Routing Angular Applications: Lesson 7 of 23

About Users

Up Next

About User Component

Autoplaying in 7 seconds!



Table of Contents

    e'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

    176 posts

    Founder of Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.