Within Angular 5, I am utilizing an *IF-else statement to determine if the authorization value is true. If it is true, then template 2 should be rendered; if false, then template 1 should be rendered. Below is the code snippet:
<div *ngIf="authorized; then picUrl else login"></div>
<ng-template #login>
<button mat-raised-button color="accent" class="mdl-cell mdl-cell--12-col mdl-color-text--white" style="background: #033342" (click)="openDialog()">Login</button>
</ng-template>
<ng-template #picUrl>
<img src="{{_loginVM.profilePic}}" class="img-thumbnail" alt="profile pic">
</ng-template>
Initiating the social component:
<social></social>
App.component.ts
export class AppComponent {
public authorized: boolean = false;
}
Social component.ts
import { AppComponent} from '../app/app.component'
export class SocialComponent {
private _appComponent: AppComponent;
constructor(private socialAuthService: AuthService, appComponent: AppComponent,
public dialogRef: MatDialogRef<SignInSignUpDialogHomeComponent>) {
this._appComponent = appComponent;
}
public socialSignIn(socialPlatform: string) {
let socialPlatformProvider: any;
if (socialPlatform == "facebook") {
socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
} else if (socialPlatform == "google") {
socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
}
this.socialAuthService.signIn(socialPlatformProvider).then(
(userData) => {
if (userData != null) {
this._appComponent.authorized = true;
this._appComponent._loginVM.profilePic = userData.image;
this.dialogRef.close();
}
}
);
}
Once a successful login occurs, the value
this._appComponent.authorized = true;Further information can also be found here
I have attempted using BehaviorSubject<boolean>, but I am unsure how to subscribe to the UI data bind. Is this the correct approach, or is there a way to directly update the component variable?