UserName not appearing on login submit button on header : Angular2

Question

Hi all I am beginner to Angular2, I am creating a small app for my learning purpose.

When I click on submit button in LoginComponent the header must hide the Login link and it should show the welcome username.

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html'
})

export class AppComponent implements OnInit {

  private user:string = '';
  isUserLoggedIn = false;

  constructor() { }

  getUserName() :void {
      //calling loginservice and setting he user
  }

  ngOnInit(): void {
    this.getUserName();
  }

/*  onSubmitted(loggenIn: boolean) {
    this.isUserLoggedIn = true;
  }
*/

}

app.html

   <header>
            <nav class="navbar navbar-default navbar-fixed-top navbar-collapse">
              <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav navbar-right">
                    <li *ngIf='!isUserLoggedIn'><a routerLink="/login">Login</a</li>
                    <li *ngIf='isUserLoggedIn'><a>Welcome {{user}}</a></li>
                  </ul>
                </div>
              </div>
          </nav>
      </header>

      <div class="container main">
        <div class="row">
          <router-outlet></router-outlet>
        </div>
      </div>  

    <footer>
         <!-- footer content -->
    </footer> 

LoginComponent

@Component({
  templateUrl: '../app/Login/Login.html'
})

export class LoginComponent {
 // @Output() onSubmitted = new EventEmitter<boolean>();

  constructor() {
     // setting username and password  to ''
  }

  onSubmit(token : boolean):void {
    if(token && this.userName) {
        localStorage.setItem('userName', this.userName);
        this.loginService.storeUserName(this.userName);
        //this.onSubmitted.emit(true);
    }
  } 
}

Now I tried using the EventEmitter , as you can see the commented code, but when I was debugging the onsubmitted() was not getting called.

Login page is composed of email, password and submit button.I am calling onSubmit event of form (ngSubmit) on click of button

Below are my some other queries :-

(1) I have created several router-link on app.html page, each is having a different component, are they child component of appComponent.ts (that is main component my-app) ??

(2) For many links I have not defined selector property in @component decorator function, Is it a good practice to define selector for every component. Because When I click on /home, /about etc each is having a different component define in router configuration file.

(3) How can I communicate (call a function) from LoginComponent , so that when I click on submit button along with page navigation the Welcome Username appears and Login link gets hide.

(4) [hidden] property not works with li ??

Any help is appreciated !!!

Thanks

Answer 1

You have to define shared service which will be shared between your LoginComponent and AppComponent and from your LoginComponent you have to emit the event after login to notify your AppComponent. Check official document for Parent and children communicate via a service

Answer 2

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html'
})

export class AppComponent implements OnInit {

  user:string = '';
  isUserLoggedIn = false;

  constructor(public userDataService: UserDataService) {
    this.userDataService.UserData.subscribe((data)=>{
      this.user = data
    })

  }

  getUserName() :void {
    //calling loginservice and setting he user
  }

  ngOnInit(): void {
    this.getUserName();
  }

  /*  onSubmitted(loggenIn: boolean) {
      this.isUserLoggedIn = true;
    }
  */

}

app.html

<header>
<nav class="navbar navbar-default navbar-fixed-top navbar-collapse">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li *ngIf='!isUserLoggedIn'><a routerLink="/login">Login</a</li>
<li *ngIf='isUserLoggedIn'><a>Welcome {{user}}</a></li>
</ul>
</div>
</div>
</nav>
</header>

<div class="container main">
<div class="row">
  <router-outlet></router-outlet>
  </div>
  </div>

  <footer>
  <!-- footer content -->
</footer>

LoginComponent

@Component({
  templateUrl: '../app/Login/Login.html'
})

export class LoginComponent {
  // @Output() onSubmitted = new EventEmitter<boolean>();

  constructor(public userDataService: UserDataService) {

    // setting username and password  to ''
  }

  onSubmit(token : boolean):void {
    if(token && this.userName) {

      this.userDataService.update(this.userName)

      localStorage.setItem('userName', this.userName);
      this.loginService.storeUserName(this.userName);
      //this.onSubmitted.emit(true);
    }
  }
}

userData.service.ts

@Injectable()
export class UserDataService {

  private UserDataSource = new BehaviorSubject(localStorage.getItem('userName') || '');
  UserData = this.messageSource.asObservable();

  constructor() { }

  update(data: string) {
    this.userDataSource.next(data)
  }

}

See the above code for your ref you have to share the data through service there by you can update the data.