title: Angular how to pass ngModel data from one component to another?
body: <p>I am trying to pass ngModel data from one component to another, where the second component can use that data to execute a function in its html.</p>
  
  <p>I am using @Input(), but I don't know how to send that data via hyperlink.</p>
  
  <p><code>home.component.ts</code></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { BasePageComponent } from 'src/app/partials/base-page/base-page.component';
  import { ActivatedRoute } from '@angular/router';
  import { SurveyService } from 'src/app/services/survey.service';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent extends BasePageComponent implements OnInit {
  
    @Input() surveyName: string;
    surveys: any[];
  
    constructor(
      route: ActivatedRoute,
      private surveyService: SurveyService) {
      super(route);
     }
  
    ngOnInit() {
      this.surveys = this.surveyService.getAll();
    }
  }
  </code></pre>
  
  <p><code>home.component.html</code></p>
  
  <pre><code>&lt;div
      class="col-4 col-sm-4 col-md-4 col-lg-4"
      *ngFor="let survey of surveys"
  &gt;
  &lt;a class="btn btn-outline-secondary" href="/about" role="button"&gt;Begin Survey&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>about.component.html</code></p>
  
  <pre><code>&lt;input type="text" [(ngModel)]="surveyName" oninput="loadSurvey(surveyName)"&gt;
  </code></pre>
  
  <p>Right now, this doesn't do anything. My expected result is that, when I click on <strong>Begin Survey</strong>, the <code>about.component.html</code> will load the survey I clicked on with <code>loadSurvey(surveyName)</code> method in</p>