Return to 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

Can anyone please advice on why I get undefined rather than the output, string or integer, that I expect?

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?

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

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 Childomponent 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 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 Childomponent implements OnInit { @Input() id: any; options: any[]; constructor(private selector: SelectService) { } ngOnInit() { console.log("TESTING INPUT VALUE: " + this.id); console.log(this.id); }); } } 

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 first item is being output from the html mark up below:

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

Here is what is printed in my console area.

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

Can anyone please advice on why the second output does not shows undefined instead of the required output?

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

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

Can anyone please advice on why I get undefined rather than the output, string or integer, that I expect?

I am experimenting with Angular 8 and padding 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 Childomponent 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 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 Childomponent implements OnInit { @Input() id: any; options: any[]; constructor(private selector: SelectService) { } ngOnInit() { console.log("TESTING INPUT VALUE: " + this.id); console.log(this.id); }); } } 

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 first item is being output from the html mark up below:

<app-dynamic-selects [id]="7">

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

Here is what is printed in my console area.

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

Can anyone please advice on why the second output does not shows undefined instead of the required output?

I am experimenting with Angular 8 and padding 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 Childomponent 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 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 Childomponent implements OnInit { @Input() id: any; options: any[]; constructor(private selector: SelectService) { } ngOnInit() { console.log("TESTING INPUT VALUE: " + this.id); console.log(this.id); }); } } 

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 first item is being output from the html mark up below:

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

Here is what is printed in my console area.

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

Can anyone please advice on why the second output does not shows undefined instead of the required output?