Navigation function not working

Question

I have write a lwc component to navigate from sign in page. Navigation function is not working.

My code

import { LightningElement ,track} from 'lwc';
import doLogin from '@salesforce/apex/loginController.doLogin';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class FaClientInvite extends NavigationMixin(LightningElement) 
{
@track password;
   @track email;
   @track welcomeMessage;
   // @track errorCheck;
   // @track errorMessage;
   connectedCallback(){
    var meta = document.createElement("meta");
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=1.0");
    document.getElementsByTagName('head')[0].appendChild(meta);
}
    handleEmailChange(event)
        {
        if(event.target.value){
            this.email = event.target.value;
            console.log('emailHandler',this.email);
        } else {
            this.email = event.target.value;
        }
    }
     handlePasswordChange(event)
     {  
        this.password = event.target.value;
    }
     handleLogin(event)
     { 
        console.log('handlLogin');
       if(this.email && this.password)
       {
       const toastEvent = new ShowToastEvent({
            title: 'Success',
            message: 'SignIn Successful!',
            variant: 'success',
        }); 
        this.dispatchEvent(toastEvent);
            console.log('email : ',this.email);
            event.preventDefault();
        doLogin({ email: this.email, password: this.password })
        .then((result)=> {
            this.isError = false;
            console.log('Result is: ', this.email)
            })
            .catch((error) => {
                this.error = error;      
                this.errorCheck = true;
                this.errorMessage = error.body.message;
            }); 
            navigateToHome();
        }
        else
        {
            console.log('elsePart');
        }
        //return this.userName;
    }
    navigateToHome()
    {
        console.log('navigation');
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__FaClientHome' 
            },
        });
    }
}

Answer 1

You need to add this before the method name from where you are calling.

handleLogin(event) { 
       console.log('handlLogin');
       if(this.email && this.password) {
        const toastEvent = new ShowToastEvent({
            title: 'Success',
            message: 'SignIn Successful!',
            variant: 'success',
        }); 
        this.dispatchEvent(toastEvent);
            console.log('email : ',this.email);
            event.preventDefault();
        doLogin({ email: this.email, password: this.password })
        .then((result)=> {
            this.isError = false;
            console.log('Result is: ', this.email)
            })
            .catch((error) => {
                this.error = error;      
                this.errorCheck = true;
                this.errorMessage = error.body.message;
            }); 
            this.navigateToHome();//here added 'this'
        } else {
            console.log('elsePart');
        }
        //return this.userName;
}
navigateToHome() {
        console.log('navigation');
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__FaClientHome' 
            },
        });
}

The “this” keyword can be found in both Aura and LWC, and their uses are quite similar.

Within LWC, the keyword can be used to access any component property or method. since “this” points to the calling context of the current code. which in most cases will be from within the LWC.