Colin Stodd

I figured this out the other day so I thought I’d share how I used AngularFire2’s email/password observable to split the email into a username. There might be a better way to do it, but this is pretty straightforward.

My goal was to display the username on a page when logged in (see image). Basically strip anything off after the @ (the fake email address was colper@example.com). It sill needs styling but you get the point. This assumes you have already set up AngularFire2’s email/password user authentication and can successfully display a user’s values.

I have my authentication logic in a auth.service.ts service file. And included the auth.service.ts where I want to render the username. In this case it was the occasions.component.ts.

From my authService I created a function getUsername(). I subscribe to that user and split(), join(), and convert it back to a toString() adding the @ in front of the username. Fairly straightforward, but I’m still getting down my promises/observables and thought this might help someone doing the same.

// auth.service.ts
export class NavbarComponent implements OnInit {
    username; // Dont forget This

    getUsername() {
        if (this.afAuth.auth.currentUser) {
            this.username = this.user
                .subscribe((user) => {
                    const splitEmail = user.email.split('@').splice(0, 1);
                    const strEmail   = splitEmail.toString();
                    this.username    = `@${strEmail}`;
                });
        }
    }
}

// occasions.component.ts
constructor(
    private dataService: DataService,
    public authService: AuthService
) {}

ngOnInit() {
    this.occasion$ = this.dataService.getOccasions();
    this.authService.getUsername();
}

Let me know if you have any questions or if there is more eloquent way to do this. Thanks.