Refreshing data in two parts of the same Angular component

Question

Within a component, I have a property that's an array with some info displayed in a summary as well as an area for making changes. Trying to get the summary data to update as changes are made.

Here's a simplified example...

// discovery.component.ts

@Component({
  selector: 'app-discovery',
  templateUrl: './discovery.component.html',
  styleUrls: ['./discovery.component.scss']
})
export class DiscoveryComponent implements OnInit {
  levels = [
    { title: 'title1', rating: 0 },
    { title: 'title2', rating: 3 },
    { title: 'title3', rating: 5 },
  ]
}





  {{ level.title }}
  {{ level.rating }} 

  {{ level.title }}
  
  {{ level.rating }}

// level-display.component.ts
import { Component, OnInit, Input } from '@angular/core'

@Component({
  selector: 'app-level-display',
  templateUrl: './level-display.component.html',
  styleUrls: ['./level-display.component.scss']
})
export class LevelDisplayComponent implements OnInit {
  @Input() level: number = 0
  levels: number[] = []

  constructor() {
  }

  ngOnInit(): void {
    this.levels = Array(this.level).fill(1)
  }

}

If I change the slider (input type=range), the summary info updates the reference to {{ level.rating }} but the component app-rating-viewer does not.

UPDATE: Looks like all of this stemmed from my establishing the array for app-level-display in ngOnInit(). Changing the component to:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-level-display',
  templateUrl: './level-display.component.html',
  styleUrls: ['./level-display.component.scss']
})
export class LevelDisplayComponent implements OnInit {
  @Input() level: number = 0

  constructor() {
  }

  iterate(n: number): Array {
    return Array(n)
  }

  ngOnInit(): void {
  }

}

fixed the issue.

user_9278493 · Answer

The best approach I can think of is using ReactiveForms with the FormArray clause.

In your component declare the value as a form array, I use FormControl as the value of rating because you need to update it dynamically:

    this.ratingsForm = this.formBuilder.array([
        { title: 'title1', rating: new FormControl(0) },
        { title: 'title2', rating: new FormControl(3) },
        { title: 'title3', rating: new FormControl(5) },
    ]);

Then in your HTML loop through it as controls

  
    {{ level.value.title }} {{ level.value.rating.value }}
  

  
  
    {{ level.value.title }}
    
    {{ level.value.rating.value }}

The formBuilder comes from a DI on the constructor:

contructor(private formBuilder: FormBuilder)

This is a very simple example, you can refactor it to look better.

Generally speaking, its better to use ReactiveForms instead of the old ngModel.

user_11506469 · Answer

please remove the value attributes

Refreshing data in two parts of the same Angular component

2 Answers