CODEWITHSUNDEEP
angulartypescript
Angular fan
Angular fan

Reputation: 39

Angular 7 @Input property binding is not working

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() {
  }  
}

Upvotes: 3

Views: 11572

Answers (6)

MaeseDude
MaeseDude

Reputation: 451

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.

Upvotes: 0

Kimwan Ogot
Kimwan Ogot

Reputation: 466

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

Upvotes: 0

Tushar Walzade
Tushar Walzade

Reputation: 3809

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);
}

Upvotes: 3

Ashish Ranjan
Ashish Ranjan

Reputation: 12950

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().

Upvotes: -1

Nick Mehrdad Babaki
Nick Mehrdad Babaki

Reputation: 12485

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.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222522

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);    
}

Upvotes: 6

Related Questions