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

Sajeetharan · Accepted Answer · 2018-12-28 03:20:05Z

6

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

answered Dec 28, 2018 at 3:20

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Comments

Tushar Walzade · Accepted Answer · 2018-12-28 04:08:43Z

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

Nick Mehrdad Babaki · Accepted Answer · 2018-12-28 03:20:09Z

0

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.

answered Dec 28, 2018 at 3:20

Nick Mehrdad Babaki

12.7k15 gold badges51 silver badges72 bronze badges

Comments

Kimwan Ogot · Accepted Answer · 2018-12-28 07:19:39Z

0

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

answered Dec 28, 2018 at 7:19

Kimwan Ogot

4664 silver badges11 bronze badges

Comments

MaeseDude · Accepted Answer · 2022-08-30 08:43:13Z

0

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

<app-task [prioirty]="High">
@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.

answered Aug 30, 2022 at 8:43

MaeseDude

4614 silver badges4 bronze badges

Comments

Ashish Ranjan · Accepted Answer · 2018-12-28 03:20:27Z

-1

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

answered Dec 28, 2018 at 3:20

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

Angular 7 @Input property binding is not working

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related