Angular 7 @Input property binding is not working

Issue

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

Solution

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 By - Sajeetharan