Refresh the Parent Component View in Angular 4

Angular - Refresh component from other component : child to parent then parent to another child communication

Use an EventEmitter in child B to execute a function in parent A, which then uses a ViewChild in A, to execute a function in child C.

easy peasy.

component A should look like this:

<div class="row">
<div class="col-6">
<app-uploadmenus (messageEvent)="uploadMenuPressed($event)"></app-uploadmenus>
</div>
</div>

<div class="row">
<div class="col-6">
<app-listemenus></app-listemenus>
</div>
</div>

component B Needs these 3 things:

import { Output, EventEmitter } from '@angular/core';
@Output() messageEvent = new EventEmitter<string>();

buttonPressed() {
this.messageEvent.emit('done');
}

component C needs:

refreshMenu() {
//do something here
}

finally component A needs a view child and a function to accept the emit call

import { ViewChild } from '@angular/core';
import { CComponent } from ...
@ViewChild(CComponent) cComponent: CComponent;

uploadMenuPressed(event:string) {
this.cComponent.refreshMenu();
}

that should do it. good luck!

How to update parent component view when data is fetched from child component?

You should use @Output

In AddStudentPopupComponent

   emails: string[] = [];
@Output() sendEmail = new EventEmitter();
sendData() {
this.sendEmail.emit(this.emails);
}

then in create-course.component.html file

<app-add-student-popup (sendEmail)="emails = $event"></app-add-student-popup>

How can I refresh my table content from the child component in the parent component with click event?

You should use ViewChild in the parent component.

import { ..., ViewChild } from '@angular/core';

@ViewChild(ChildComponent) childComponent: ChildComponent;

...
childComponent.refresh();
...

Refresh Parent Component While navigating From Child Component

Perhaps you can have your parent component listen for route changes and update your data accordingly:

export class MyComponent {
homepageData: any;

constructor(private router: Router) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// update this.homepageData
});
}
...
}

How to force child component to reload its data and its view when parent data changes Angular 4

In your Person component, you take the percentage value on initialization and no longer update it. Instead of doing that, you could use the person property, that has the always up to date value. So you should be able to use it as

{{person.percentage}}

in your template.

How to notify parent component of change and refresh view

I had following setup:

  • Parent Component places_component
  • Child Component post_new_component
  • Child Component post_list_component

To solve my problem I had to send the event not to the Parent Component, but to the other child component. So @Output wouldn't have worked. I just hooked up the EventBus to the other child component.

So the html of the parent component in short looked like this:

...
<div><new-post [place]="place"></new-post></div>
<div><list-posts [place]="place"></list-posts></div>
...

So the child component new-post needs to notify the child component list-posts, that a new post has been added and list-posts should re-fetch all posts related to a place.

post_event.dart (Event Bus Service)

The Event Bus service is setup between the post_new_component and the post_list_component.

I'm passing an int to the Stream (int id), this is not important right now, as I only need to check, if an event has fired, you could also parse a string, an object or anything else, if you need to send data with the event.

@Injectable()
class PostEvent {
final StreamController<int> _onEventStream = new StreamController.broadcast();
Stream<int> onEventStream = null;

static final PostEvent _singleton = new PostEvent._internal();

factory PostEvent() {
return _singleton;
}

PostEvent._internal() {
onEventStream = _onEventStream.stream;
}

onEvent(int id) {
_onEventStream.add(id);
}
}

post_new_component.dart

After the post has been added, _postEvent.onEvent(1) is executed. As explained above "1" is not important, as I only want to know, if an event was fired.

@Component(
selector: 'new-post',
directives: [coreDirectives,
formDirectives,
FileUploader,
materialInputDirectives,
MaterialButtonComponent],
templateUrl: 'post_new_component.html',
styleUrls: ['post_new_component.css'],
providers: [ClassProvider(PostService), ClassProvider(PostEvent)]
)
class PostNewComponent {
final PostService _postService;
final PostEvent _postEvent;

String postText;
Post post;

@Input()
Place place;

PostNewComponent(this._postService, this._postEvent);

// Save a new post
Future<void> save() async {
// Create a new post and then fire a post event to notify the post list component to update itself.
await _postService.create(postText,place.id).then(((_) => _postEvent.onEvent(1)));
}
}

post_list_component.dart

I setup the event listener in the constructor of the component, that listens for event changes from the post-new component. Each time an event is received, I fetch all posts through the _getPosts() function.

@Component(
selector: 'list-posts',
directives: [coreDirectives, formDirectives],
templateUrl: 'post_list_component.html',
styleUrls: ['post_list_component.css'],
providers: [ClassProvider(PostService), ClassProvider(PostEvent)]
)
class PostListComponent implements OnInit {
final PostService _postService;
final PostEvent _postEvent;
List<Post> posts;

@Input()
Place place;

PostListComponent(this._postService, this._postEvent) {
// listen for postEvents, if received re-fetch posts
_postEvent.onEventStream.listen((int id) => _getPosts());
}

// Get all posts when page loads the first time
void ngOnInit() => _getPosts();

// Function to get all the posts related to a place
Future<void> _getPosts() async {
posts = await _postService.getPostsByPlace(place.id);
}
}

If anybody knows a better way to do it, by any means correct me, as I'm not that familiar with the framework yet, and have a hard time to understand the concepts. The documentation covers much, but if somebody is totally new to the framework, like me, I'm missing some info. An extension to the Hero Documentation would be appreciated, that covers the more complex topics, such as communication between child components, and child to parent, but not sure, if this is explained somewhere, and I just missed it.

Refresh parent Content out of child View

Hey thanks everybody for your answer.

Put I used some ionic specific API to solve it.

I was creating the Child Popover via

presentPopover(ev) {

let popover = this.popoverCtrl.create(PopoverPage, {});

popover.present({
ev: ev
});

Then there is some listener from Ionic which solves my Problem.

popover.onDidDismiss(data => {
//Can Use Data which is passed by Popover
});


Related Topics



Leave a reply



Submit