Interpolation not working in Angular

I have an Angular project that I am working on and for some reason interpolation is not working in one particular component. I have tried comparing this component with the other components within the project but they are identical. However, it is not working. I have copied the component.ts and component.html files below. What am I doing incorrectly?

members.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn, fallIn, moveInLeft } from '../router.animations';

@Component({
selector: 'app-members',
templateUrl: './members.component.html',
styleUrls: ['./members.component.css'],
animations: [moveIn(), fallIn(), moveInLeft()],
host: {'[@moveIn]': ''}
})
export class MembersComponent implements OnInit {

name: any;
state = '';
test = 'test2';

constructor(public af: AngularFireAuth, private router: Router) {

this.af.authState.subscribe(auth => {
if (auth) {
this.name = af.auth.currentUser;
console.log('Display Name: ' + this.name.displayName);
}
});

}

logout() {
this.af.auth.signOut();
console.log('logged out');
this.router.navigateByUrl('/login');
}

ngOnInit() {
}

}


members.component.html

<div class="form-container" id="toolbar">
<header [@fallIn]="state">
<button (click)="logout()" class="basic-btn">Logout</button>
</header>
<div id="page" [@moveInLeft]="state">
<h2>Hey {{ this.name.displayname }}!</h2>

<p>This is a test {{ test }}</p>

<img src="/src/assets/images/filler.png" />
</div>

</div>

Continue reading...