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
Angular - How to Get Result of a Json Object
Javascript Backslash (\) in Variables Is Causing an Error
How to Tell Chrome Web Debugger to Show the Current Mouse Position in Page Coordinates
Preventing Viewport Resize of Web Page When Android Soft Keyboard Is Active
Jquery Ui Tabs - How to Get Currently Selected Tab Index
Javascript Regex Splitting Words in a Comma Separated String
Filter Input Text to Enter Only Number and Not Even Decimal
Android Webview Not Loading Website Properly
Auto Populate Field Base on What Was Entered in Another Field Simultaneously
How to Monitor Changes to an Object
React-Native React-Navigation Undefined Is Not an Object (Evaluating 'S.Value.Startswith')
Javascript to Download a File from Amazon S3 Bucket
How to Use Zindex in React-Native
Reactjs - Multiple If Conditions Inside Map Function
How to Set Page Size and Set Margin in Print in Internet Explorer With JavaScript and CSS
How to Reference Static Assets Within Vue JavaScript
How to Close Bootstrap 3 Dropdown When We Click Outside on a Tablet