Parent not passing value to child

Any help or hint would be greatly appreciated it. In my parent component.html for attribute title I assigned string 'popup1':

                <dropmenu [title]='popup1' [items]="getContextMenuItems(node)" (onSelect)="onClick($event)" 
             [dropdownStyles]="{'left': 'calc(100% - 120px)'}" docRowId="{{node.id}}" [addTabIndex]="node.active" >

In the dropmenu child component:

                template: `
                <div #dropmenu class="dropmenu" style="height:16px" (contextmenu)="rightClick($event)" focusout-close (onFocusout)="closeOptions()" id="dropmenu_{{docRowId}}" title="{{title}}">
                  <div class="item-area">Albert11
                </div>
                </div>


                export class DropMenuComponent {
              @Input('items') items: any[] = [];
              @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();
              @Input() dropdownStyles: any = {};
              @Input('docRowId') docRowId: string;
              @ViewChild('dropmenu') dropmenu: ElementRef;
              @Input('addTabIndex') addTabIndex:boolean = false;
               
              @Input('title') title: string;

But I don't see the value of title being pass from parent to child component in the element.

Solution 1:

What is popup1? Is that a variable or did you want to pass popup1 as the string value itself?. If latter, then try title without the property binding.

using [title] looks at a value of the variable called popup1. In your case since you just want to pass the string popup1, use title='popup1' instead of [title]='popup1' without the square braces.

  <dropmenu title='popup1' [items]="getContextMenuItems(node)" (onSelect)="onClick($event)" 
             [dropdownStyles]="{'left': 'calc(100% - 120px)'}" docRowId="{{node.id}}" [addTabIndex]="node.active" >