CODEWITHSUNDEEP
angularangular-components
Lijin Durairaj
Lijin Durairaj

Reputation: 3511

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

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 enter image description here

I am not sure what exactly i am doing wrong.

Upvotes: 0

Views: 191

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658017

[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.

Upvotes: 2

Related Questions