Input property binding issue

Question

I am experimenting with Angular 8 and passing data between components.

The child component is as follows:

import { Component, OnInit, Input } from '@angular/core'; import { SelectService } from '../select.service'; @Component({ selector: 'app-dynamic-selects, test-dynamic-tag', templateUrl: './dynamic-selects.component.html', styleUrls: ['./dynamic-selects.component.css'] }) export class DynamicSelectComponent implements OnInit { @Input() id: any; options: any[]; constructor(private selector: SelectService) { } ngOnInit() { console.log("TESTING INPUT VALUE: " + this.id); console.log(this.id); this.selector.users().subscribe(users => { this.options = users; }); } }

The parent template is where the problem is being manifested. I am attempting to output different examples of the child component tag but only the component tags where [id] is an integer are being output. Tags with strings just say 'undefined'.

@Input() id is typed as any but even typing is as string does not resolve the issue.

Below is the parent component markup:

<app-dynamic-selects [id]="7"></app-dynamic-selects> <br><br> <test-dynamic-tag [id]="test"></test-dynamic-tag> <br><br> <app-dynamic-selects [id]="Batman"></app-dynamic-selects> <br><br> <test-dynamic-tag [id]="14"></test-dynamic-tag>

As shown above, I am using 2 different selector tags for the same component. But it doesn't matter which I use, subsequent tags print out undefined.

Here is what is printed in my console area from the html above:

TESTING INPUT VALUE: 7
7
TESTING INPUT VALUE: undefined
undefined
TESTING INPUT VALUE: undefined
undefined
TESTING INPUT VALUE: 14
14

Why do I get undefined rather than the output, string or integer, that I expect?

The parent and child components look the same except for the subscription part . Besides even the selectors and tags don't match. Are you sure you posted the correct question? Review it again . — Mohit Singh
– Mohit Singh, Commented Mar 3, 2020 at 2:21
@MohitSingh: Apologies. I was fighting sleep in the early hours of the morning when I posted. I have provided clarifications to my question. — sisko
– sisko, Commented Mar 3, 2020 at 9:57

Markus Dresch · Accepted Answer · 2020-03-03 10:00:05Z

When using bracket syntax, you are binding to a expression, typically a property in your component. A number literal is a valid expression, so the binding works. test and Batman is not a valid expression if there's no property of that name defined in your component. 'test' and 'Batman' would work, since a string literal is a valid expression.

When binding to literals, you don't really need the bracket syntax though, simply use the normal html attribute syntax (i.e. without brackets).

BELLIL · Accepted Answer · 2020-03-03 10:04:16Z

to complete the response of Markus Dresch, you can use either

<test-dynamic-tag [id]="test"></test-dynamic-tag>

and then you should have a variable named test in you rcontroller

or

<test-dynamic-tag id="test"></test-dynamic-tag>

and then you pass a String value to your child component

Collectives™ on Stack Overflow

Input property binding issue

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related