Angular passing data from parent to child component?

Question

I am trying to pass data value selected from a dropdownlist from a user. I have a parent component (app.component.html) and child component (hello.component.html & hello.component.ts).

Based on the option value selected, i want to pass the value from the parent component to the child component. I think i have done everything right so far.. May I know why is it not working? Currently, the browser says "failed to compile".

app.component.html

    <h2> Course Details </h2>
    Select a course to view 
    <select #course (change)="name = course.value">
        <option value="Node JS">Node JS</option>
        <option value="Typescript">Typescript</option>
        <option value="Angular">Angular</option>
        <option value="React JS">React JS</option>
        </select><br/><br/>
    <app-hello [cName]="name"></app-hello>

    <router-outlet></router-outlet>

hello.component.ts

    import { Component, Input, OnInit } from '@angular/core';

    @Component({
      selector: 'app-hello',
      templateUrl: './hello.component.html', // templateUrl property is used to bind external template file with the component
      styleUrls: ['./hello.component.css']
    })
    export class HelloComponent implements OnInit {

      courses = [
        { courseId: 1, courseName: "Node JS" },
        { courseId: 2, courseName: "Typescript" },
        { courseId: 3, courseName: "Angular" },
        { courseId: 4, courseName: "React JS" }
      ];
      
      @Input() 
      cName: any;

      constructor() { 
        
      }

      ngOnInit(): void {
      }

    }

hello.component.html

    <table border="1" *ngIf="cName">
        <thead>
          <tr>
            <th>Course ID</th>
            <th>Course Name</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let c of courses">
            <td *ngIf="c.courseName == cName">{{c.courseId}}</td>
            <td *ngIf="c.courseName == cName">{{c.courseName}}</td>
          </tr>
        </tbody>
    </table>

Joshua McCarthy · Accepted Answer · 2021-08-31 04:40:42Z

1

The issue may be with how name is defined/updated in your app.component.ts which is not displayed in your example.

Try updating the (change) output to call a public method in app.component.ts, then update the value of name inside that method. Also make sure that name is defined with a value inside your TS file.

app.component.ts

public name = '';

public updateName(newName:string){
  this.name = newName;
}

app.component.html

<select #course (change)="updateName(course.value)">

answered Aug 31, 2021 at 4:40

Joshua McCarthy

1,8771 gold badge10 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

avinashkr · Accepted Answer · 2021-08-31 04:50:31Z

The problem lies with the below line because its not decalared anywhere so can't be used in the template:

<select #course (change)="name = course.value">

You should have a function for change event & then use a component variable to store and pass the value to child component like below:

app.component.html

<select #course (change)="updateCourse(course.value)">
<app-hello [cName]="courseName"></app-hello>

app.component.ts

let courseName: string;
updateCourse(name) {
   this.courseName = name
}

Hien Nguyen · Accepted Answer · 2021-08-31 05:01:19Z

0

I am not sure what issue "failed to compile" with your code, but I tried to reproduce your code in stackblitz, it worked well.

May be you did not declare Route in module?

RouterModule.forRoot(appRoutes)

Worked link https://stackblitz.com/edit/angular-ivy-brewfe

answered Aug 31, 2021 at 5:01

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

1 Comment

BlueTree Over a year ago

I forgot to declare Route in the module. Thanks! The below solution also works fine.

Collectives™ on Stack Overflow

Angular passing data from parent to child component?

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related