Styjun

Does cover affect melee attacks?

If I did not sign promotion bonus document, my career would be over. Is this duress?

Car as a good investment

Is oxygen above the critical point always supercritical fluid? Would it still appear to roughly follow the ideal gas law?

Is the tap water in France safe to drink?

How do I copy an installed steam game on my PC to an external hard drive?

Are there 99 percentiles, or 100 percentiles? And are they groups of numbers, or dividers or pointers to individual numbers?

Why does Principal Vagina say, "no relation" after introducing himself?

Vergil Book XII, Line 756 | Meter Question

How does Data know about his off switch?

Idiom for a situation or event that makes one poor or even poorer?

Does my protagonist need to be the most important character?

Accidental duration in measureless music

Does immunity to fear prevent a mummy's Dreadful Glare from paralyzing a character?

Did I Traumatize My Puppy?

How will the crew exit Starship when it lands on Mars?

Christmas party at employers home

Interaction between casting spells and the Attack action

Should I avoid "big words" when writing to a younger audience?

Does the US require a House vote to begin an impeachment inquiry?

Encountering former, abusive advisor at a conference

Which CentOS 7 package provides the "boot" manpage?

Does Darwin owe a debt to Hegel?

What's the meaning of java.util.@Nullable?

create x number of child components based on input text field value in angular 6

Angular 2 - Defining Inputs in Abstract (Parent) ComponentEmit search input value to child components in Angular 2Angular 5 ngOnChanges fires only once in child componentHow to set property of child of child(or nth child) component in Angular 5How to access the values of different inputs of child component that is used multiple times in a same parent component?How to pass and show validation error from service in child component angular4 below particular input tagAngular: Validate form with multiple child componentsCustom form input field similar to angular material

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

0

I want to be able to create x number of child components based on what I type in an input text field in Angular 6. For example, if I type in 5, then 5 child components are created.

This is my parent component:

<input type="text" class="form-control" [(ngModel)]="circlecount">
<div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index" 
 [index]="i"></app-circle>
</div>

This is my child component:

export class CircleComponent 
 circleArray;
 @Input() index: number;
 @Input() circlecount: number;

 ngOnChanges()
 this.circleArray = Array(this.circlecount).fill(0).map((x,i)=>i);
 

I type in a number in the input field and nothing happens.

angular

share|improve this question

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

add a comment
 | 

0

I want to be able to create x number of child components based on what I type in an input text field in Angular 6. For example, if I type in 5, then 5 child components are created.

This is my parent component:

<input type="text" class="form-control" [(ngModel)]="circlecount">
<div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index" 
 [index]="i"></app-circle>
</div>

This is my child component:

export class CircleComponent 
 circleArray;
 @Input() index: number;
 @Input() circlecount: number;

 ngOnChanges()
 this.circleArray = Array(this.circlecount).fill(0).map((x,i)=>i);
 

I type in a number in the input field and nothing happens.

angular

share|improve this question

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

add a comment
 | 

I want to be able to create x number of child components based on what I type in an input text field in Angular 6. For example, if I type in 5, then 5 child components are created.

This is my parent component:

<input type="text" class="form-control" [(ngModel)]="circlecount">
<div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index" 
 [index]="i"></app-circle>
</div>

This is my child component:

export class CircleComponent 
 circleArray;
 @Input() index: number;
 @Input() circlecount: number;

 ngOnChanges()
 this.circleArray = Array(this.circlecount).fill(0).map((x,i)=>i);
 

I type in a number in the input field and nothing happens.

angular

share|improve this question

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

<input type="text" class="form-control" [(ngModel)]="circlecount">
<div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index" 
 [index]="i"></app-circle>
</div>

export class CircleComponent 
 circleArray;
 @Input() index: number;
 @Input() circlecount: number;

 ngOnChanges()
 this.circleArray = Array(this.circlecount).fill(0).map((x,i)=>i);
 

angular

angular

share|improve this question

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

share|improve this question

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

asked Mar 28 at 21:21

mdailey77mdailey77

7722 silver badges1313 bronze badges

3 Answers
3

active

oldest

votes

0

This is something I put together to get this to work how you describe.

shape.component.ts (parent)

import Component from '@angular/core';

@Component(
selector: 'app-shape',
 template: `<input type="text" class="form-control"
 [(ngModel)]="circleCount" (keyup)="changes()">
 <div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index"
 [index]="i"></app-circle>
 </div>`,
 styles: ['']
)
export class ShapeComponent 
 circleCount = 0;
 circleArray = [];
 changes() 
 this.circleArray = new Array(+this.circleCount)
 .fill(0).map((x, i) => i);
 

circle.component.ts (child)

import Component, Input from '@angular/core';

@Component(
 selector: 'app-circle',
 template: `<div>Circle index</div>`,
 styles: ['']
)
export class CircleComponent 
 @Input() index: number;
 constructor() 

share|improve this answer

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much. This is exactly what I was looking for.
  
  – mdailey77
  Mar 28 at 22:34
  

  
  
  
  

add a comment
 | 

0

You cant bind to a property in another component with ngModel. Bind the count to a property inside your parent component and then pass it to your child component via @Input

share|improve this answer

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's what I'm doing with [(ngModel)]="circlecount" and @Input() circlecount. I was able to pass circlecount to the child component but I can't use it in ngFor because it's a number. I tried creating an array with it but couldn't get it to work.
  
  – mdailey77
  Mar 28 at 21:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In the code you provided u do are not passing circleCount to your child component. Anyways, try binding the input value change to some function, inside the function modify ur array property and of that array create the child components using NgFor
  
  – RadekF
  Mar 28 at 22:07
  
  

  
  
  
  

add a comment
 | 

0

The problem is simple. The lifecycle hook OnChanges is called when a databound property changes. For bindings with ngModel use (ngModelChange)="onChange($event)".

The markup:

<input type="number" [ngModel]="circlecount" (ngModelChange)="onChange($event)">

The onModelChange event:

onChange(circlecount: number): void 
 this.circlecount = circlecount;
 this.circleArray = new Array(this.circlecount).fill(0).map((x,i)=>i);

share|improve this answer

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55407032%2fcreate-x-number-of-child-components-based-on-input-text-field-value-in-angular-6%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

This is something I put together to get this to work how you describe.

shape.component.ts (parent)

import Component from '@angular/core';

@Component(
selector: 'app-shape',
 template: `<input type="text" class="form-control"
 [(ngModel)]="circleCount" (keyup)="changes()">
 <div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index"
 [index]="i"></app-circle>
 </div>`,
 styles: ['']
)
export class ShapeComponent 
 circleCount = 0;
 circleArray = [];
 changes() 
 this.circleArray = new Array(+this.circleCount)
 .fill(0).map((x, i) => i);
 

circle.component.ts (child)

import Component, Input from '@angular/core';

@Component(
 selector: 'app-circle',
 template: `<div>Circle index</div>`,
 styles: ['']
)
export class CircleComponent 
 @Input() index: number;
 constructor() 

share|improve this answer

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much. This is exactly what I was looking for.
  
  – mdailey77
  Mar 28 at 22:34
  

  
  
  
  

add a comment
 | 

0

This is something I put together to get this to work how you describe.

shape.component.ts (parent)

import Component from '@angular/core';

@Component(
selector: 'app-shape',
 template: `<input type="text" class="form-control"
 [(ngModel)]="circleCount" (keyup)="changes()">
 <div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index"
 [index]="i"></app-circle>
 </div>`,
 styles: ['']
)
export class ShapeComponent 
 circleCount = 0;
 circleArray = [];
 changes() 
 this.circleArray = new Array(+this.circleCount)
 .fill(0).map((x, i) => i);
 

circle.component.ts (child)

import Component, Input from '@angular/core';

@Component(
 selector: 'app-circle',
 template: `<div>Circle index</div>`,
 styles: ['']
)
export class CircleComponent 
 @Input() index: number;
 constructor() 

share|improve this answer

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much. This is exactly what I was looking for.
  
  – mdailey77
  Mar 28 at 22:34
  

  
  
  
  

add a comment
 | 

This is something I put together to get this to work how you describe.

shape.component.ts (parent)

import Component from '@angular/core';

@Component(
selector: 'app-shape',
 template: `<input type="text" class="form-control"
 [(ngModel)]="circleCount" (keyup)="changes()">
 <div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index"
 [index]="i"></app-circle>
 </div>`,
 styles: ['']
)
export class ShapeComponent 
 circleCount = 0;
 circleArray = [];
 changes() 
 this.circleArray = new Array(+this.circleCount)
 .fill(0).map((x, i) => i);
 

circle.component.ts (child)

import Component, Input from '@angular/core';

@Component(
 selector: 'app-circle',
 template: `<div>Circle index</div>`,
 styles: ['']
)
export class CircleComponent 
 @Input() index: number;
 constructor() 

share|improve this answer

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

import Component from '@angular/core';

@Component(
selector: 'app-shape',
 template: `<input type="text" class="form-control"
 [(ngModel)]="circleCount" (keyup)="changes()">
 <div id="rectangle">
 <app-circle *ngFor="let circle of circleArray; let i = index"
 [index]="i"></app-circle>
 </div>`,
 styles: ['']
)
export class ShapeComponent 
 circleCount = 0;
 circleArray = [];
 changes() 
 this.circleArray = new Array(+this.circleCount)
 .fill(0).map((x, i) => i);
 

import Component, Input from '@angular/core';

@Component(
 selector: 'app-circle',
 template: `<div>Circle index</div>`,
 styles: ['']
)
export class CircleComponent 
 @Input() index: number;
 constructor() 

share|improve this answer

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

answered Mar 28 at 22:08

R. RichardsR. Richards

16.6k99 gold badges4444 silver badges5050 bronze badges

0

You cant bind to a property in another component with ngModel. Bind the count to a property inside your parent component and then pass it to your child component via @Input

share|improve this answer

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's what I'm doing with [(ngModel)]="circlecount" and @Input() circlecount. I was able to pass circlecount to the child component but I can't use it in ngFor because it's a number. I tried creating an array with it but couldn't get it to work.
  
  – mdailey77
  Mar 28 at 21:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In the code you provided u do are not passing circleCount to your child component. Anyways, try binding the input value change to some function, inside the function modify ur array property and of that array create the child components using NgFor
  
  – RadekF
  Mar 28 at 22:07
  
  

  
  
  
  

add a comment
 | 

0

You cant bind to a property in another component with ngModel. Bind the count to a property inside your parent component and then pass it to your child component via @Input

share|improve this answer

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's what I'm doing with [(ngModel)]="circlecount" and @Input() circlecount. I was able to pass circlecount to the child component but I can't use it in ngFor because it's a number. I tried creating an array with it but couldn't get it to work.
  
  – mdailey77
  Mar 28 at 21:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  In the code you provided u do are not passing circleCount to your child component. Anyways, try binding the input value change to some function, inside the function modify ur array property and of that array create the child components using NgFor
  
  – RadekF
  Mar 28 at 22:07
  
  

  
  
  
  

add a comment
 | 

You cant bind to a property in another component with ngModel. Bind the count to a property inside your parent component and then pass it to your child component via @Input

share|improve this answer

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

share|improve this answer

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

answered Mar 28 at 21:38

RadekFRadekF

25422 silver badges66 bronze badges

0

The problem is simple. The lifecycle hook OnChanges is called when a databound property changes. For bindings with ngModel use (ngModelChange)="onChange($event)".

The markup:

<input type="number" [ngModel]="circlecount" (ngModelChange)="onChange($event)">

The onModelChange event:

onChange(circlecount: number): void 
 this.circlecount = circlecount;
 this.circleArray = new Array(this.circlecount).fill(0).map((x,i)=>i);

share|improve this answer

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges

add a comment
 | 

0

The problem is simple. The lifecycle hook OnChanges is called when a databound property changes. For bindings with ngModel use (ngModelChange)="onChange($event)".

The markup:

<input type="number" [ngModel]="circlecount" (ngModelChange)="onChange($event)">

The onModelChange event:

onChange(circlecount: number): void 
 this.circlecount = circlecount;
 this.circleArray = new Array(this.circlecount).fill(0).map((x,i)=>i);

share|improve this answer

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges

add a comment
 | 

The problem is simple. The lifecycle hook OnChanges is called when a databound property changes. For bindings with ngModel use (ngModelChange)="onChange($event)".

The markup:

<input type="number" [ngModel]="circlecount" (ngModelChange)="onChange($event)">

The onModelChange event:

onChange(circlecount: number): void 
 this.circlecount = circlecount;
 this.circleArray = new Array(this.circlecount).fill(0).map((x,i)=>i);

share|improve this answer

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges

<input type="number" [ngModel]="circlecount" (ngModelChange)="onChange($event)">

onChange(circlecount: number): void 
 this.circlecount = circlecount;
 this.circleArray = new Array(this.circlecount).fill(0).map((x,i)=>i);

share|improve this answer

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges

answered Mar 28 at 22:36

PierrePierre

49433 silver badges1010 bronze badges