Angular 6 - @input is not working

Question

I have written a simple angular application to learn @input to communicate between components but the value is not being passed. I have also read some forums who have faced similar problems but none of the solutions prescribed are working for me. Please guide.

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 am trying to display the value of priority in an alert box, I get the value as undefined.

Let me know if anyone wants me to place the complete code.

My bad @Sajeetharan, the timing of the answer was closed hence the mistake — Tarun Bhatt
– Tarun Bhatt, Commented Jul 15, 2018 at 8:20
LOL even the answers have the wrong spelling. Perhaps this might be useful Code Spell Checker — user8745435
– user8745435, Commented Jul 15, 2018 at 20:25

Sajeetharan · Accepted Answer · 2018-07-15 07:19:20Z

3

You have a typo,

Change from

 @Input() priortiy: string;

To

 @Input() prioirty: string;

and alert too,

alert(this.prioirty);

answered Jul 15, 2018 at 7:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Angular 6 - @input is not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related