I created a basic Angular application to understand how @input works for component communication, but I am facing an issue where the value is not getting passed. I have gone through various forums where others had similar problems, but none of the suggested solutions have worked for me. Can someone provide guidance on this?
app.componenent.html
<app-task [prioirty]="'p1'"></app-task>
task.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Task } from 'src/app/task/task';
import { TaskService } from 'src/app/task/services/task.service';
import {AppComponent} from 'src/app/app.component'
@Component({
selector: 'app-task',
templateUrl: './task.component.html',
styleUrls: ['./task.component.css'],
})
export class TaskComponent implements OnInit {
constructor(private taskService: TaskService) {
}
task: Task = new Task();
@Input() priortiy: string;
ngOnInit() {
}
addTask(){
alert(this.priortiy);
this.taskService.addTask(this.task).subscribe((data : Task) => {}, error => console.error(error),() => console.log("Job Added successfully"));
}
}
When I try to display the value of priority in an alert box, it shows up as undefined.
If needed, I can share the complete code.