Not able to pass data from parent to child component in angular4

Question

When I try to pass the data from the parent to the child component I get error.

This is the tag which I have placed it in the parent component.

<pop-up [showPopUp]="true" [content]="content" [title]="title goes here"></pop-up>

Child component

import { Component, OnInit, Input } from '@angular/core';


@Component({
  selector: 'pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {
  @Input()
  showPopUp: boolean;
  @Input()
  title: string = "";
  @Input()
  content: string = "";

  constructor() {
  }
  ngOnInit() {
    debugger;
  }
  proceed() {
    this.showPopUp = true;
  }
  closePopUp() {
    this.showPopUp = false;
  }
}

I want to use the variable showPopUp , title and content in the HTML like this

 <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
 <h5 class="modal-title" id="exampleModalLabel">{{content}}</h5>

But when I try to use it, I get error

I am not sure what exactly i am doing wrong.

Answer 1

[title]="title goes here"

should be

[title]="'title goes here'"

or

title="title goes here"

Your original code tries to assign the value of the expression title goes here to title , but that is no valid expression. You can make the expression a string literal, or remove [] , then Angular won't try to interpret the value as expression.