Why @input doesn't load the data in the variable?

Question

Hello I am trying to pass info between components of the following way

Parent view

<div class="board">
    <app-ad [ad]="Title"></app-ad>
</div>

Child component:

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

@Component({
  selector: 'app-ad',
  templateUrl: './ad.component.html',
  styleUrls: ['./ad.component.less']
})
export class AdComponent implements OnInit {

  @Input()
  ad: string;

  constructor() { console.log(this.ad) }//undefined

  ngOnInit() {console.log(this.ad) }//undefined

}

Child view

Title: {{ad}}

When I load the page, the variable isn't set.

Thanks

Answer 1

The problem is in your parent component, more specifically in a way how you pass the variable to [ad]. That would work fine if Title was an actual variable.

<app-ad [ad]="Title"></app-ad>

Parent

export class ParentComponent {
  Title = 'someTitle';
}

However if you want to pass the string value directly to template make sure to quote it

<div class="board">
    <app-ad [ad]="'Title'"></app-ad>
</div>