title: UserName not appearing on login submit button on header : Angular2
body: <p>Hi all I am beginner to Angular2, I am creating a small app for my learning purpose.</p>
  
  <p>When I click on submit button in LoginComponent the header must hide the Login link and it should show the welcome username.</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>@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;
    }
  */
  
  }
  </code></pre>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>   &lt;header&gt;
              &lt;nav class="navbar navbar-default navbar-fixed-top navbar-collapse"&gt;
                &lt;div class="container-fluid"&gt;
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                    &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li *ngIf='!isUserLoggedIn'&gt;&lt;a routerLink="/login"&gt;Login&lt;/a&lt;/li&gt;
                      &lt;li *ngIf='isUserLoggedIn'&gt;&lt;a&gt;Welcome {{user}}&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            &lt;/nav&gt;
        &lt;/header&gt;
  
        &lt;div class="container main"&gt;
          &lt;div class="row"&gt;
            &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
        &lt;/div&gt;  
  
      &lt;footer&gt;
           &lt;!-- footer content --&gt;
      &lt;/footer&gt; 
  </code></pre>
  
  <p><strong>LoginComponent</strong></p>
  
  <pre><code>@Component({
    templateUrl: '../app/Login/Login.html'
  })
  
  export class LoginComponent {
   // @Output() onSubmitted = new EventEmitter&lt;boolean&gt;();
  
    constructor() {
       // setting username and password  to ''
    }
  
    onSubmit(token : boolean):void {
      if(token &amp;&amp; this.userName) {
          localStorage.setItem('userName', this.userName);
          this.loginService.storeUserName(this.userName);
          //this.onSubmitted.emit(true);
      }
    } 
  }
  </code></pre>
  
  <p>Now I tried using the EventEmitter , as you can see the commented code, but when I was debugging the onsubmitted() was not getting called.</p>
  
  <p>Login page is composed of email, password and submit button.I am calling onSubmit event of form (ngSubmit) on click of button</p>
  
  <p>Below are my some other queries :-</p>
  
  <p>(1) I have created several <strong>router-link</strong> on app.html page, each is having a different component, are they child component of appComponent.ts (that is main component my-app) ??</p>
  
  <p>(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.</p>
  
  <p>(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.</p>
  
  <p>(4) [hidden] property not works with li ?? </p>
  
  <p>Any help is appreciated !!!</p>
  
  <p>Thanks </p>