Types in Typescript

User interface

Create a folder for our models /app/_models then right click and select Generate Interface and call it User.

export interface User {
  id: number;
  username: string;
  gender: string;
  age: string;
  knownAs: string;
  created: Date;
  lastActive: Date;
  introduction?: string;
  lookingFor?: string;
  interests?: string;
  city?: string;
  country?: string;
  profilePhotoUrl: string;
  photos?: Photo[];

Generate a new interface for Photo.

export interface Photo {
    id: number;
    url: string;
    description: string;
    dateAdded: Date;
    isMain: boolean;

JWT headers

To automatically send JWT headers for each request configure angular-jwt.

Open app.module.ts and add the configuration just below the HttpClientModule.

  config: {
    tokenGetter: () => {
      return localStorage.getItem('token');
    whitelistedDomains: ['localhost:5001'],
    blacklistedRoutes: ['localhost:5001/api/auth/']

This will add the token to every request except for those sent to /api/auth.

Base API url

Open src/environments.ts and add the base address for the API.

export const environment = {
  production: false,
  apiUrl: 'https://localhost:5001/api/'

User service

Right click on _service and select Generate Service and name it user. The JWT token will automatically be added to the headers.

export class UserService {
  baseUrl = environment.apiUrl;

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.baseUrl + 'users');

Open app.module.ts and add the UserService to providers.

providers: [

Member list

Open member-list.component.ts and add DI for UserService and AlertifyService, then add a property to store the users and a function loadUseres;

export class MemberListComponent implements OnInit {
  users: User[];

    private userService: UserService,
    private alertify: AlertifyService
  ) {}

  ngOnInit() {

  loadUsers() {
      users => {
        this.users = users;
      error => {

Let’s add some html to our component.

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-3 col-sm-6">
      <p *ngFor="let user of users">{{ user.knownAs }}</p>


Open the application and click Members (login is necessary): we should see a list of our users.