I'm facing an issue trying to pass the selected value from a dropdownlist in a user interface. I have a parent component (app.component.html) and a child component (hello.component.html & hello.component.ts).
My goal is to transfer the option value selected by the user from the parent component to the child component. Despite my efforts, it seems there's an error preventing it from working as intended. The browser displays a message saying "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',
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>