how to make the contents of home page to change when signUp with user page in angular4

Question

The contents of home page and user page are displayed on the home page itself. In the header section i have SignIn and SignUp form from home.html. I have another Signup form from user page, where in i have 3 buttons, signUp with facebook, signUp with google and SignUp with name, email and password. When i signUp using signUp with facebook, signUp with google, the conents of home page change from SignIn and SignUp to User and SignOut, and the SignUp form of user page gets hidden.

But this case doesnt work when i give just signUp using name, email and password.

I have used emit emitter as well, but that doesnt work with just SignUp. Can anyone help.

Home.html:

<ul>
<li class="signUp" *ngIf = "loggedIn">{{userName}}</li>
<li class="signIn" (click)="signOut()" *ngIf = "loggedIn">Sign Out</li>
<li class="signUp" (click)="openSignUp(user)"  *ngIf = "!loggedIn">Sign Up</li>
<li class="signIn" (click)="openSignIn(logedin)"  *ngIf = "!loggedIn">Sign In</li>
</ul> 

User.html:

<div class="favourate" *ngIf="!loggedIn">
    <h1>User</h1>
    <hr />
    <div class="backImage">
      <form name="signUpForm" class="signUpForm" #signUpForm="ngForm" novalidate>
        <div class="form-group">
          <h3>Sign Up</h3>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>perm_identity</mat-icon>
            <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="name" #Name="ngModel" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>email</mat-icon>
            <input matInput type="email" placeholder="Email" name="email" [(ngModel)]="user.email" #Email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" required>
          </mat-form-field>
        </div>
        <div class="form-group input">
          <mat-form-field> 
            <mat-icon>lock</mat-icon>
            <input matInput type="password" placeholder="Password" name="password" [(ngModel)]="user.password" #Password="ngModel" required>
          </mat-form-field>
        </div>          
      </form>
    </div>
  </div>

User.ts:

this.ApiService
      .checklogin()
      .subscribe(
        user  => {
          this.loggedIn = localStorage.getItem("loggedin");
          this.user_id = user.data[0].user_id;
          this.userName = user.data[0].name;
        }, error => {
          console.log(error);
        });
      newUser(user,_id) {
        this.isLoadingSignUp = true;
        user.role_id = this._id 
        var data = {
          "user":{
          email:user.email,
          password:user.password,
          active:user.active,
          role_id:this._id,
          name:user.name
           }     
        }
        this.ApiService
            .signUp(data)
            .subscribe(
              signUser => {
                  this.userName = user.name;
                  localStorage.setItem('loggedin', 'true');
                  this.loggedIn = true;
                  this.isLoadingSignUp = false;
                  this.router.navigate(['/home']);
                  this.toasterService.pop('success', 'SignUp Successfully');
                  this.ApiService.getUserData(user.data);
               }, error => {
                  this.isLoadingSignUp = false;
                  this.ApiService.getUserData(error);
                  if(error.data && error.data.length > 0) {
                    this.toasterService.pop('error', error.data);
                  } else {
                    this.toasterService.pop('error', 'Something went wrong!');
                  }
               })
      }

Answer 1

You can use Observable and subject to communicate between different components.

You should do this using a service.

Create a service called SignUpService which creates a new subject for indicating signin

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class SignUpService {
  private signInSource = new Subject<string>();

  signinDone$ = this.signInSource.asObservable();

  signIn() {
    this.signInSource.next();
  }
}

Call that subject in signIn component

import { SignInService }     from './signin.service';

@Component({
})
export class SignInComponent {
    this.SignInService.signIn();
}

Recieve that event in Header component

import { SignInService }  from './signin.service';
import { Subscription }   from 'rxjs/Subscription';

@Component({
})
export class HeaderComponent implements OnDestroy {
  subscription: Subscription;

  constructor(private signInService: SignInService) {
    this.subscription = signInService.signinDone$.subscribe(
      signin => {
        alert('came here')
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}