title: Passing "username" value from one component to another component in Angular 2
body: <p>I understand how to nest a child-component within a parent-component in Angular 2. That's easy enough to accomplish. But I'm a little unclear as to how to just pass one value down from one component to another. In my use-case I want to pass a username down from a login component, to a chat component - so that the username will display in the chatbox. That's all I need to do. I understand the @Input() decorator is probably something to use here, I'm just unclear as to how to actually pass in the value using it.</p>
  
  <p>This is what I have in my login component html:</p>
  
  <pre><code>&lt;div class="center-box"&gt;
          &lt;form name="form" class="form-fields" (ngSubmit)="f.form.valid &amp;&amp; login()" #f="ngForm" novalidate&gt;
              &lt;div class="form-group" [ngClass]="{ 'has-error': f.submitted &amp;&amp; !username.valid }"&gt;
                  &lt;input type="text" form autocomplete="off" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required /&gt;
                  &lt;div *ngIf="f.submitted &amp;&amp; !username.valid" class="help-block"&gt;Username is required&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group" [ngClass]="{ 'has-error': f.submitted &amp;&amp; !password.valid }"&gt;
                  &lt;input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required /&gt;
                  &lt;div *ngIf="f.submitted &amp;&amp; !password.valid" class="help-block"&gt;Password is required&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;button class="submit-btn"&gt;Login&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;div align="center" [ngStyle]="{'color': 'red'}"&gt;&lt;alert&gt;&lt;/alert&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And my login component looks like this:</p>
  
  <pre><code>import { AuthenticationService } from './../../data/authentication.service';
  import { AlertService } from './../../data/alert.service';
  import { Component, OnInit, Input } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
      selector: 'app-login',
      templateUrl: 'app/views/login/login.component.html',
      styleUrls: ['app/views/login/login.component.css']
  })
  
  export class LoginComponent implements OnInit {
  
      model: any = {};
      loading = false;
      username;
      password;
  
      constructor(
          private router: Router,
          private authenticationService: AuthenticationService,
          private alertService: AlertService) { }
  
      ngOnInit() {
          // reset login status
          this.authenticationService.logout();
      }
  
      login() {
          this.loading = true;
          this.authenticationService.login(this.model.username, this.model.password)
              .subscribe(
                  data =&gt; {
                      this.router.navigate(['/']);
                      console.log('User logged in as: ' + this.model.username);
                  },
                  error =&gt; {
                      this.alertService.error(error);
                      this.loading = false;
                  });
      }
  }
  </code></pre>
  
  <p>My chat component html looks like this:</p>
  
  <pre><code>&lt;div class="centered-display" align="center"&gt;
    &lt;h3&gt;User: {{username}}&lt;/h3&gt;
    &lt;div *ngFor="let message of messages" class="message"&gt;
      {{username}}: {{message.text}}
    &lt;/div&gt;
    &lt;input class="form-group" [(ngModel)]="message" (keypress)="eventHandler($event)"&gt;
    &lt;div class="spacing"&gt;
      &lt;button class="submit-btn" md-button (click)="sendMessage()"&gt;SEND&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the chat component file:</p>
  
  <pre><code>import { Router, ActivatedRoute } from '@angular/router';
  import { ChatService } from './chat.service';
  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { TabPage } from '../../ui/tab-navigation/tab-page';
  
  @Component({
    templateUrl: './chat.component.html',
    styleUrls: ['./chat.component.less']
  })
  export class ChatComponent extends TabPage implements OnInit, OnDestroy {
  
    username = '';
    messages = [];
    users = [];
    routes;
    connection;
    userbase;
    route;
    message;
    user;
  
    constructor(private chatService:ChatService, router: Router, route: ActivatedRoute) {
  
          super(router, route);
  
          this._title = 'Chat Room';
  
          this.addEventListener('paramsChange', function(params) {
  
              this._title = 'Chat Room';
  
          }.bind(this));
     }
  
    sendMessage() {
      this.chatService.sendMessage(this.message);
      this.message = '';
    }
  
    sendUser() {
      this.chatService.sendUser(this.user);
      this.user = '';
    }
  
      trackUser() {
      this.chatService.trackUser(this.route);
      console.log('A user just navigated to ' + this.route);
    }
  
    // For when user clicks "enter/return" to send message
    eventHandler(event: KeyboardEvent): void {
      if (event.key === 'Enter') {
          this.chatService.sendMessage(this.message);
          this.message = '';
      }
    }
  
    ngOnInit() {
      this.connection = this.chatService.getMessages().subscribe(message =&gt; {
        this.messages.push(message);
      });
      this.userbase = this.chatService.getUsers().subscribe(user =&gt; {
        this.users.push(user);
      });
      this.routes = this.chatService.getRoutes().subscribe(route =&gt; {
        this.routes.push(route);
      });
    }
  
    ngOnDestroy() {
      this.connection.unsubscribe();
      this.userbase.unsubscribe();
    }
  
  }
  </code></pre>
  
  <p>So basically it comes down to how I pass the value in where the h3 is in the chat component view: <h3>User: {{username}}</h3>. How do I bind the username value from the login-component, and pass it in here in the chat component?</p>