How To Create A Username From An Email Address Using AngularFire2

How To Create A Username From An Email Address Using AngularFire2

Colin Stodd
24 Jul 2017 (Published)
24 Jul 2017 (Updated)

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 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 ='@').splice(0, 1);
                    const strEmail   = splitEmail.toString();
                    this.username    = `@${strEmail}`;
// occasions.component.ts
    private dataService: DataService,
    public authService: AuthService
) {}

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

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