Why doesn't angular render my field component?

Question

I have a BoxComponent that has only one field, an array of numbers. The selector for this Component is app-box

box.component.html

<p>
    <span *ngFor="let num of cards">Number is {{num}}</span>
</p>

box.component.ts

export class BoxComponent {

  cards: number[] = [];

  top_up(val: number) {
    this.cards.push(val);
  }

}

In its parent AppComponent, I added a single field that stores a BoxComponent object.

app.component.html

<app-box></app-box>
<button (click)="push()">Top-up</button>

app.component.ts

export class AppComponent {
  title = 'test';
  box: BoxComponent = new BoxComponent();

  push() {
    this.box.top_up(Math.floor(Math.random() * 10));
  }
}

I wish to make the click in the appcomponent template to modify the contents of app-box. However angular does not update the app-box when the button is clicked. I somehow was able to confirm that the field box of appcomponent actually gets updated, the change just doesn't show in the browser. Based on this I have concluded that the app-box tag creates a different BoxComponent rather than use the one I have created within the AppComponent class.

Am I right? How do I make angular render my box and respond to changes I make to it from the AppComponent click event?

Edit: I have simplified the problem to its simplest form.

I have updated the question to include those parts. I didn't think they were relevant to the question. I am a beginner to angular you see. — Isaac Dzikum
– Isaac Dzikum, Commented Nov 24, 2022 at 13:36
I have simplified the problem the previous one was too verbose but this equally represents the exact same problem — Isaac Dzikum
– Isaac Dzikum, Commented Nov 24, 2022 at 15:14

Vahid18u · Accepted Answer · 2022-11-24 17:27:07Z

1

change the app component to :

export class AppComponent {
  title = 'test';
  @ViewChild('bComponent') boxComponent!: BoxComponent;

  push() {
    this.boxComponent.top_up(Math.floor(Math.random() * 10));
  }
}

and it's html to :

<app-box #bComponent></app-box>
<button (click)="push()">Top-up</button>

answered Nov 24, 2022 at 17:27

Vahid18u

4031 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Isaac Dzikum Over a year ago

Thanks @Vahid18u. This works perfectly for this scenario, what if the field was an array of BoxComponent objects instead of just one?

Vahid18u Over a year ago

I guess @ViewChildren might help.

Vishnu Prabhu · Accepted Answer · 2022-11-24 12:20:22Z

0

Just add the "return" keyword in the "add_card" function.

card.ts

export class Card {
  suit: number | undefined;
  rank: number | undefined;

  constructor(suit: number, rank: number) {
    this.suit = suit;
    this.rank = rank;
  }
}

player.component.ts

import { Component } from '@angular/core';
import { Card } from '../card';

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css'],
})
export class PlayerComponent {
  cards: Card[] = [];

  constructor() {
    this.cards = [new Card(2, 4), new Card(3, 7)];
  }

  add_card() {
   return this.cards.push(new Card(2, 4));
  }
}

player.component.html

<div class="card-container">
    <ng-content></ng-content>
    <div class="inner">
        <div class="card" *ngFor="let card of cards">
            <span>suit {{card.suit}}</span>
            <span>rank {{card.rank}}</span>
        </div>
    </div>
    <button (click)="add_card()">Add</button>
</div>

edited Nov 24, 2022 at 12:20

answered Nov 24, 2022 at 12:07

Vishnu Prabhu

1295 bronze badges

4 Comments

Isaac Dzikum Over a year ago

So I have tried it but it hasn't changed the behavior of the application.

Vishnu Prabhu Over a year ago

I have edited and added a new button

Isaac Dzikum Over a year ago

basically when I call the deal on each of the players from the app.component.ts, the change is not renderd but it is rendered if I call it from player.component.html

Isaac Dzikum Over a year ago

I have simplified the problem the previous one was too verbose but this equally represents the exact same problem.

shubham sharma · Accepted Answer · 2022-11-24 15:44:02Z

0

Use this way in your App component

@ViewChild(BoxComponent)BoxComponentRef:BoxComponent;
push()
{
this.BoxComponentRef.top_up(Math.floor(Math.random());
}

answered Nov 24, 2022 at 15:44

shubham sharma

1563 bronze badges

Collectives™ on Stack Overflow

Why doesn't angular render my field component?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related