Angular 7 @Input property binding is not working

Question

I have written a simple angular application with @input to communicate between components but the value is not being passed.

app.componenent.html

<app-task [prioirty]="High"></app-task>

task.component.ts

import { Component, OnInit, Input } from '@angular/core';
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 {          
  @Input() priortiy: string; 
  constructor(private taskService: TaskService) {    
      console.log(this.priority);    
  }  
  ngOnInit() {
  }  
}

Answer 1

As i see you need to make the following changes,

(i) You should enclose the string within quotes as follows

change

From

<app-task [prioirty]="High"></app-task>

To

<app-task [prioirty]="'High'"></app-task>

(ii) Add your console.log inside the ngOnInit not within your constructor as you need to wait until the component gets loaded,

ngOnInit() {
   console.log(this.priority);    
}  

Answer 2

Please note that you are using 3 different variables by mistake ! Your variable in TaskComponent is priortiy & you are printing priority and passing prioirty in HTML.

When you use input property binding, you simply need to pass your value with quotes if it isn't a class property . So, your HTML snippet with a best practice will be -

<app-task [priority]="'High'"></app-task>

And the following is also valid, where [] is now removed & it will consider the value as a string as any html attribute does -

<app-task priority="High"></app-task>

In parent to child communication, using appropriate component lifecycle hooks is recommended . So, in order to get the latest value every time, you'll need to implement OnChanges interface with the following method -

ngOnChanges() {
    console.log(this.priority);
}

Answer 3

You should use

<app-task prioirty="High"></app-task>

when you are using

<app-task [prioirty]="High"></app-task> 

it means High is a variable but without bracket it means high is a string.

Answer 4

You get the input property after ngOnChanges() lifeCycle hook. If you want to check whether you are getting it your child component, add the console in ngOnInit() - ngOnInit() runs once after first ngOnChanges()

ngOnInit() {
    console.log(this.priority);
}

Alternatively, log it in ngOnChanges().

Answer 5

The reason why your code does not work is that, by using the binding syntax bracket [] with value as High , It is looking for a property in your component with name High .

To fix this, you can either use the following code:

<app-task priority="High"></app-task>

or

<app-task [priority]="'High'"></app-task>

both of these options will treat the property value as string literal.

Please check the code in the link provided below:

https://stackblitz.com/edit/angular-component-task-input

Answer 6

I think your problem is a simple typo in the word "priority":

1. <app-task [prioirty]="High">
2. @Input() priortiy: string;

One time it's "prioirty", the second time it's "priortiy". Notice the "i" moving around... Maybe just rename it to "prio" to avoid this easy kind of mistake.