Updating a child component in Angular 5

update child component from parent component angular 7
angular child component not updating
angular change input value in child component
angular input binding
angular component reference
how to reload parent component in angular 6
angular initialize child component
pass value to component angular

I'm trying to update a child component in Angular 5, and cannot get it working.

My home component gets data via a service.

It has a function called getTopicToFilter which is updated by another component. This works fine and gives me the TopicId via an @Output EventEmitter.

My problem though is that articles aren't updating in a child component

export class HomeComponent implements OnInit {
    loading = true;

    topics: Observable<Topic[]>;
    posts: Observable<Post[]>;

    public constructor(
        private blogService: BlogService
    ) { }


    ngOnInit() {
        this.posts = this.blogService.getPostsByTopic().share()
        // Note that the forkJoin gets other, unrelated data that I have removed from the question
        Observable.forkJoin([
            this.posts
        ]).subscribe(
            response => { },
            error => {
                console.log('An error occurred:', error);
            },
            () => {
                this.loading = false;
            });
    }

    getTopicToFilter(topicId) {
        // I've confirmed I get the right data back from my service based on the topicId
        this.posts = this.blogService.getPostsByTopic(topicId)
    }

}

Html for HomeComponent:

<app-posts [posts]="posts | async"></app-posts>

And finally my child PostsComponent;

export class PostsComponent{
    @Input() posts: Post[];

    ngOnChanges(changes: SimpleChanges) {
        // only run when property "data" changed
        if (changes['posts']) {
            //  This is always outputting my original insights, not the filtered list
            console.log(this.posts)
        }
    }
}

Update - this is my BlogService

public getPostsByTopic(topicId = ""): Observable<Post[]> {
   return this.http.get<Post[]>(this.baseUrl + '/getPostsByTopic?TopicId=${topicId}', { headers });
}
export class PostsComponent implements OnChanges {
@Input() posts: Post[];

ngOnChanges(changes: SimpleChanges) {
     for (let propName in changes) {
    // only run when property "data" changed
    if (propName === 'posts') {
         //  this line will update posts values 
         this.posts = changes[propName].currentValue

        console.log(this.posts) 
    }
   }
 }
}

Update child component from parent, You could use a shared service, but you could also just skip that and do the following: in your ChildComponent declare String Subject : public static yourString:  /child-input-component.html. We have an input that takes a FormGroup which expects a parent form. Then in the template the real magic happens. It looks like we’re creating a brand new form.

Try changing

export class PostComponent

to

export class PostComponent implements OnChanges

Update The Child Component And Parent Component Using @Input , Updating the Child Class. import { Component, OnInit, Input. } from '@angular/core'; export class TestChildComponent implements OnInit { @Input() Addition: number; //Note you need to import Input from @angular/core. constructor() {} Import the Child Component in the Module. Every Component, directive, pipes we build must belong to an Angular Module. To do that we need to register our component in the Module. A Component, directive, piles cannot be part of more than one module.

I think the best way is to use *ngIf on the child component, for example

<child-component [posts]="data | async" *ngIf="dataIsReady" ></child-component>

In your parent component when you have to update the data

this.dataIsReady = false;
this.postService.getData().subscribe(
   (result: any) => {
     this.data = result;
     this.dataIsReady = true;
   }
);

*ngIf force the child component to reRender. I hope you'll find this usefull

Component interaction, The HeroParentComponent nests the child HeroChildComponent inside an *​ngFor repeater, binding its master string property to the child's master alias, and each  Angular will automatically update a component when it detects a variable change . So all you have to do for it to "refresh" is ensure that the header has a reference to the new data. This could be via a subscription within header.component.ts or via an @Input variable

Parent Child Component Communication in Angular, Since we will be looking how Angular updates input properties for This syntax is generic so it can be applied for both child components and native DOM elements. AText; // update second span _ck(_v, 5, 0, currVal_3); }. Angular apps are built as a hierarchy of components. When you build applications you will need to communicate between components, while services are a good way to share data between components, there are specific methods to carry out parent-child component communication.

The mechanics of property bindings update in Angular, Every component in Angular has a template with HTML elements. When First, it updates the input bindings for the child component. Then it These 5 articles will make you an Angular Change Detection expert. If you're  Want to get access to a child component, directive or a DOM element from a parent component class? It’s easy to do with the ViewChild decorator. ViewChild returns the first element that matches a given component, directive or template reference selector. In cases where you’d want to access multiple children, you’d use ViewChildren instead.

A gentle introduction into change detection in Angular, refresh child component from parent angular 6 angular 4 refresh child component update child component from parent component angular 7 how to refresh  The parent component cannot data bind to the child's start and stop methods nor to its seconds property. You can place a local variable, #timer, on the tag <countdown-timer> representing the child component. That gives you a reference to the child component and the ability to access any of its properties or methods from within the parent template.

Comments
  • Try by making posts property in PostsComponent public.
  • Please put the HTML dom code used. Seems posts are not updated correctly. Most often the arrays of posts used with ngFor can be easily updated by even a simple push.
  • Which HTML @gary? The html on the PostsComponent isn't really relevant as I'm trying to log in the console in the component
  • Does BlogService return a different array reference on each update? To be sure that you have a new one, try this: getTopicToFilter(topicId) { this.posts = []; this.posts.push(...this.blogService.getPostsByTopic(topicId)); }.
  • So, console.log(this.posts) is executed in ngOnChanges after the changes, but showing the same values, or the statement is not reached at all?