title: How to use the input of one component in another - Angular4
body: <p>I'm a new in Angular and I have a problem: I need to use one variable from ComponentA in ComponentB So this is my code below (I need to use "favoriteSeason" input result in component "Result"
  Component A</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   import { Component } from '@angular/core';
     import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn }
     from '@angular/forms';
     import {MatRadioModule} from '@angular/material/radio';
     import { ResultComponent } from '../result/result.component';
     import { HostBinding } from '@angular/core';
  
     @Component({
       selector: 'app-answer-three',
       templateUrl: './answer-three.component.html',
       styleUrls: ['./answer-three.component.css']
     })
     export class AnswerThreeComponent  {
  
       disableBtn: boolean;
       favoriteSeason: string;
       seasons: string[] = ['Cheesburger', 'Cheesecake', 'Fondue', 'Pizza'];
         submit() {
         this.disableBtn = !this.disableBtn;
         const result = this.favoriteSeason;
         console.log(result);
       }
  
     }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="co"&gt;
      &lt;mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason" (ngSubmit)="submit()"&gt;
        &lt;div class="form-check"&gt;
          &lt;h1&gt;Choose a food:&lt;/h1&gt;
        &lt;/div&gt;
        &lt;mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season"&gt;
          {{season}}
        &lt;/mat-radio-button&gt;
      &lt;/mat-radio-group&gt;
      &lt;div class="example-selected-value"&gt;Your favorite food is: {{favoriteSeason}}&lt;/div&gt;
      &lt;nav&gt;
        &lt;div class="column"&gt;
          &lt;button class="btn btn-primary" [disabled]="disableBtn" name="button" (click)="submit()"&gt;save
  
          &lt;/button&gt;
          &lt;button class="btn btn-primary" [disabled]="!disableBtn" name="button" (click)="submit()"&gt;
            &lt;a routerLink="/result"&gt;Next&lt;/a&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I need to use the result of "favoriteSeason" in component Result 
  Component B</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   import { NgModule, Output } from '@angular/core';
     import { Component, OnInit, Input } from '@angular/core';
     import {Subject} from 'rxjs';
     import { Injectable } from '@angular/core';
     import { AnswerThreeComponent } from '../answer-three/answer-three.component';
     import { HostListener } from '@angular/core';
  
  
     @Component({
       selector: 'app-result',
       templateUrl: './result.component.html',
       styleUrls: ['./result.component.css'],
     })
     export class ResultComponent  {
  
  
     @Input () answer: AnswerThreeComponent;
     @Input () res: AnswerThreeComponent['submit'];
  
     @HostListener('click')
     click() {
      const result = this.answer.favoriteSeason;
      console.log(this.answer.favoriteSeason);
     }
     }</code></pre>
  </div>
  </div>
  </p>
  
  <p>But i received an error - "can't find favoriteSeason name". What I do wrong? Thank you for any help and sorry if I wrote this question wrong (it's my first time)</p>