import { ChangeDetectionStrategy , ChangeDetectorRef , Component , OnInit } from '@angular/core' ; import { Moralis } from 'moralis' ; import { environment } from 'src/environments/environment' ; import { User } from './user.component' ; @ Component ( { selector : 'app-root' , templateUrl : 'app.component.html' , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class AppComponent implements OnInit { title = 'Moralis Angular App' ; user ? : User ; constructor ( private cdr ) { } ngOnInit ( ) { Moralis . start ( { appId : environment . moralis . appId , serverUrl : environment . moralis . serverUrl , } ) . then ( ( ) => console . info ( 'Moralis has been initialised.' ) ) . finally ( ( ) => this . setLoggedInUser ( Moralis . User . current ( ) ) ) ; } login ( provider = 'metamask' ) { ( provider === 'metamask' ? Moralis . Web3 . authenticate ( ) : Moralis . Web3 . authenticate ( { provider } ) ) . then ( ( loggedInUser ) => this . setLoggedInUser ( loggedInUser ) ) . catch ( ( e ) => console . error ( `Moralis '${ provider }' login error:` , e ) ) ; } logout ( ) { Moralis . User . logOut ( ) . then ( ( loggedOutUser ) => console . info ( 'logout' , loggedOutUser ) ) . then ( ( ) => this . setLoggedInUser ( undefined ) ) . then ( ( ) => Moralis . Web3 . cleanup ( ) ) . catch ( ( e ) => console . error ( 'Moralis logout error:' , e ) ) ; } private setLoggedInUser ( loggedInUser ? ) { this . user = loggedInUser ; console . info ( 'Loggedin user:' , loggedInUser ) ; /**
         * Manual detect changes due to OnPush change detection.
         * This can be eliminated if you use async pipe and Observables
         * (out of scope of this demo)
         */ this . cdr . detectChanges ( ) ; } }