I want to send data from my child component to my parent component using the Output() and EventEmitter methods. However, it appears as though nothing is being sent through, despite the function the emitter is in being hit in the child component?
My child component:
#Output() urlStringEvent = new EventEmitter<string>();
ngOnInit(): void {
this.startUpload();
}
startUpload() {
// Unrelated Code Above ^^^^
// Assign URL's to Array
this.task.snapshotChanges().pipe(
last(),
switchMap(() => ref.getDownloadURL())
).subscribe(url => {
this.urlStringEvent.emit(url);
})
}
In the above startUpload() method, the 'url' response is sent through, however nothing seems to happen with 'this.urlStringEvent.emit(url);'
In my parent component (component.html):
<app-upload-task-training (showEvent)="receiveUrlString($event)"></app-upload-task-training>
component.ts:
receiveUrlString($event: any) {
console.log($event);
}
Nothing is logged in the $event as seen above, why could this be?
You did not properly name the event in your html. Change html code like this:
<app-upload-task-training (urlStringEvent)="receiveUrlString($event)"></app-upload-task-training>
You are emitting urlStringEvent but in html you using showEvent, It will not work either you can change your html like this
<app-upload-task-training (urlStringEvent)="receiveUrlString($event)"></app-upload-task-training>
OR
Change this
#Output() urlStringEvent = new EventEmitter<string>();
to this
#Output('showEvent') urlStringEvent = new EventEmitter<string>();
Related
I am working on unit-testing with jasmine and karma an angular component. In the template-component a custom dropdown component is used:
<div class="my-modal-body">
<form [formGroup]="form" class="form-horizontal">
<div class="padding-dropdown">
<my-form-wrapper
label="Dateiformat"
labelClass="col-lg-4 two-col-label-size"
inputClass="col-lg-8 two-col-input-size"
>
<my-dropdown
[items]="exportOptionen"
formControlName="dateiTyp"
(selectedChange)="exportFileChange($event)"
>
</my-dropdown>
</my-form-wrapper>
</div>
In my testing I try to test the value change, but can't get it working. However I try to set the value, the exportFileChange is not triggered.
And I know that the component is correct, because it's already in production. So it has to be the test that errors.
Here is my test:
it('dateiTyp auswahl excel', waitForAsync(() => {
spyOn(component, 'exportFileChange');
dateiTyp.setValue('Excel');
component.dateiTyp.setValue('Excel', { emitEvent: true });
fixture.detectChanges();
fixture.whenStable().then(
() => {
expect(component.exportFileChange).toHaveBeenCalled();
let exDiv = fixture.debugElement.query(By.css("#excelExportDiv"));
expect(exDiv).not.toBeNull();
}
);
}));
When changing the selection the exportFileChange(event) method should be called and in the template an div appears. The exportFileChange-Method in the component just changes an boolean.
I tested changing the boolean in the test and that worked, but the event still wasn't triggered.
Here are the most relevant parts of the setup:
describe('ExportModalComponent', () => {
[...]
let dateiTyp: jasmine.SpyObj<FormControl>;
let dateiTypChange: Subject<string>;
[...]
beforeEach( waitForAsync(() => {
[...]
dateiTyp = jasmine.createSpyObj('dateiTyp', ['value', 'setValue']);
formGroup.get.withArgs('dateiTyp').and.returnValue(dateiTyp);
dateiTypChange = new Subject();
Object.defineProperty(dateiTyp, 'valueChanges', { value: dateiTypChange });
[...]
and my-dropdown.component.d.ts:
export declare class myDropdownComponent implements ControlValueAccessor, OnInit, OnChanges
{ [...] }
I can change the ExportModal-template or the ExportModal-component but I can't change the implementation or use of myDropdownComponent.
I am grateful for every help!
Thanks!
This is not a complete answer but it should help you.
This is a good read. In these kind of situations, I just use triggerEventHandler on the DebugElement.
Something like this:
it('should do abc', () => {
// get a handle on the debugElement
const myDropDown = fixture.debugElement.query(By.css('my-dropdown'));
// the first argument is the name of the event you would like to trigger
// and the 2nd argument of type object (or anything) is the $event you want to mock for the calling function
myDropDown.triggerEventHandler('selectedChange', { /* mock $event here */});
// continue with tests
});
I am not entirely sure how your components are wired but that's the best way I have found to raise custom events for custom components.
I'm new in Firebase. I'm using Firestore database and Ionic, I have this problem with an asynchronous call and I can't solve it. Basically in the item variable goes the data that I have saved in the firestore database. But when I want to show them, through a button, in a new html page a strange thing happens, in the url the passed parameter appears and disappears immediately and nothing works anymore. I had a similar problem in the past that I solved using the angular pipe "async" , but in this case it doesn't even work.
In detail, I have a list of items in a component:
ngOnInit() {
this.itemService.getItemsList().subscribe((res)=>{
this.Tasks = res.map((t) => {
return {
id: t.payload.doc.id,
...t.payload.doc.data() as TODO
};
})
});
}
and in item.service.ts I have defined the function:
constructor(
private db: AngularFireDatabase,
private ngFirestore: AngularFirestore,
private router: Router
) { }
getItemsList() {
return this.ngFirestore.collection('items').snapshotChanges();
}
getItem(id: string) {
return this.ngFirestore.collection('items').doc(id).valueChanges();
}
For each item I have a button to show the detail:
<ion-card *ngFor="let item of Tasks" lines="full">
....
<ion-button routerLinkActive="tab-selected" [routerLink]="['/tabs/item/',item.id]" fill="outline" slot="end">View</ion-button>
In component itemsDescription.ts I have:
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
});
this.itemService.getItem(this.id).subscribe((data)=>{
this.item=data;
});
}
Finally in html page:
<ion-card-header>
<ion-card-title>{{item.id}}</ion-card-title>
</ion-card-header>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>{{item.Scadenza.toDate() | date:'dd/MM/yy'}}</ion-label>
<ion-card-content>{{item.Descrizione}}</ion-card-content>
The Scadenza and Descrizione information are shown, instead id is not. Also the url should be tabs/items/:id but when I click on the button to show the item information, the passed parameter immediately disappears and only tabs/items is displayed. If I remove the data into {{}}, the parameter from the url doesn't disappear
SOLVED
I followed this guide https://forum.ionicframework.com/t/async-data-to-child-page-with-ionic5/184197. So putting ? , for example {{item?.id}} now everything works correctly
Your nested code order not right. You will get the value of id after subscription.
Check this Code:
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id'];
this.profileService.getItem(this.id).subscribe((data)=>{
this.item=data;
});
});
}
Here is my app.component.ts (excerpt) -
export class AppComponent {
_subscription;
constructor(private themeService: ThemeService){
themeService.getDefaultTheme();
this._subscription = themeService.themeChange.subscribe((value) => {
//Some code
});
}
}
and theme.service.ts (excerpt) -
export class ThemeService {
themeChange: Subject<boolean> = new Subject<boolean>();
getDefaultTheme(){
this.changeTheme(true);
}
changeTheme(val:boolean){
//Some code
this.themeChange.next(val);
}
}
As app-root is my root component, the constructor in app.component.ts is called shortly after the initial page load. The constructor calls getDefaultTheme() which causes the Subject in theme.service.ts to emit an event. I am subscribing to that event back in the this._subscription ... part.
In short, on the initial page load, getDefaultTheme() should be called and the subscription should be handled as well.
But when I load the page, the getDefaultTheme() method is called but the subscription is not handled. I do not get any error at the compile time as well as in the run time.
I delayed the execution of getDefaultTheme() like
setTimeout(function(){
themeService.getDefaultTheme();
}, 5000);
Now the subscription was handled. I suspect that the event is not ready to be subscribed at the page load. How can I solve this?
It looks like you're emitting your subject before you've registered the subscription in the constructor. Swap over the call to your subject to be after you've registered the subscription.
export class AppComponent {
_subscription;
constructor(private themeService: ThemeService){
this._subscription = themeService.themeChange.subscribe((value) => {
//Some code
});
// After Subscription is listening
themeService.getDefaultTheme();
}
}
Subscribers to Subject could only receive notifications pushed to it's source after the subscription. Instead you could use ReplaySubject with buffer 1. It can "hold/buffer" the current value pushed to it and emit it immediately to future subscribers.
export class ThemeService {
themeChange: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
getDefaultTheme(){
this.changeTheme(true);
}
changeTheme(val:boolean){
//Some code
this.themeChange.next(val);
}
}
While BehaviorSubject is also a viable alternative, it requires a default value during initialization:
themeChange: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
I have Ionic 2 app with one view for 3 different data sets. Data are loaded in constructor and based on variable in page params, it's decided which data set to show.
At every successful data call by observable, event handler logs success when data are loaded. But this only works when I click/load view for a first time. If I click for 2nd or any other time, data are not re-loaded (no log). Also, when I just console log anything, it won't show at 2nd+ click.
So I wonder what should I change to load data everytime and how constructor works in this manner.
This is how my code looks like. Jsons are called from namesListProvider.
#Component({
templateUrl: '...',
})
export class ListOfNames {
...
private dataListAll: Array<any> = [];
private dataListFavourites: Array<any> = [];
private dataListDisliked: Array<any> = [];
constructor(private nav: NavController, ...) {
...
this.loadJsons();
console.log('whatever');
}
loadJsons(){
this.namesListProvider.getJsons()
.subscribe(
(data:any) => {
this.dataListFavourites = data[0],
this.dataListDisliked = data[1],
this.dataListAll = data[2]
if (this.actualList === 'mainList') {
this.listOfNames = this.dataListAll;
this.swipeLeftList = this.dataListDisliked;
this.swipeRightList = this.dataListFavourites;
}
else if (...) {
...
}
this.listSearchResults = this.listOfNames;
}, err => console.log('hey, error when loading names list - ' + err),
() => console.info('loading Jsons complete')
)
}
What you're looking for are the Lifecycle events from Ionic2 pages. So instead of using ngOnInit you can use some of the events that Ionic2 exposes:
Page Event Description
---------- -----------
ionViewLoaded Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewLoaded event is good place to put your setup code for the page.
ionViewWillEnter Runs when the page is about to enter and become the active page.
ionViewDidEnter Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.
ionViewWillLeave Runs when the page is about to leave and no longer be the active page.
ionViewDidLeave Runs when the page has finished leaving and is no longer the active page.
ionViewWillUnload Runs when the page is about to be destroyed and have its elements removed.
ionViewDidUnload Runs after the page has been destroyed and its elements have been removed.
In your case, you can use the ionViewWillEnter page event like this:
ionViewWillEnter {
// This will be executed every time the page is shown ...
this.loadJsons();
// ...
}
EDIT
If you're going to obtain the data to show in that page asynchronously, since you don't know how long would it take until the data is ready, I'd recommend you to use a loading popup so the user can we aware of something happening in the background (instead of showing a blank page for a few seconds until the data is loaded). You can easily add that behaviour to your code like this:
// Import the LoadingController
import { LoadingController, ...} from 'ionic/angular';
#Component({
templateUrl: '...',
})
export class ListOfNames {
...
private dataListAll: Array<any> = [];
private dataListFavourites: Array<any> = [];
private dataListDisliked: Array<any> = [];
// Create a property to be able to create it and dismiss it from different methods of the class
private loading: any;
constructor(private loadingCtrl: LoadingController, private nav: NavController, ...) {
...
this.loadJsons();
console.log('whatever');
}
ionViewWillEnter {
// This will be executed every time the page is shown ...
// Create the loading popup
this.loading = this.loadingCtrl.create({
content: 'Loading...'
});
// Show the popup
this.loading.present();
// Get the data
this.loadJsons();
// ...
}
loadJsons(){
this.namesListProvider.getJsons()
.subscribe(
(data:any) => {
this.dataListFavourites = data[0],
this.dataListDisliked = data[1],
this.dataListAll = data[2]
if (this.actualList === 'mainList') {
this.listOfNames = this.dataListAll;
this.swipeLeftList = this.dataListDisliked;
this.swipeRightList = this.dataListFavourites;
}
else if (...) {
...
}
this.listSearchResults = this.listOfNames;
}, err => console.log('hey, error when loading names list - ' + err),
() => {
// Dismiss the popup because data is ready
this.loading.dismiss();
console.info('loading Jsons complete')}
)
}
The solution is don't do this in the constructor, use ngOnInit() instead. Components are created only once, therefore the constructor will only be called when first created.
Your component class must implement the OnInit interface:
import { Component, OnInit } from '#angular/core';
#Component({
templateUrl: '...',
})
export class ListOfNames implements OnInit {
constructor(...)
ngOnInit() {
this.loadJsons();
}
private loadJsons() {
...
}
}
i'm coming from Angular 2 world, not ionic, but angular 2 has the option to register callbacks on init/destory (ngInit/ngDestory).
try to move initialization to ngInit, save subscription handler, and don't forget to unsubscribe it on destory.
i think your issue related to that you are not unsubscribing.. :\
So i have a Modal Component with a form in it, this component is used for both creating an entry to the DB and editing an existing one.
It has a subscription option to the onSubmit event, which is being executed on a successful submit.
What happens for some reason is that some of this component's element subscription executes and some won't, and it looks like those on the "create-mode" will and those on the "edit-mode" wont.
Code Section
CreateOrUpdateTransactionComponent:
#Component({
selector: 'create-update-transaction',
templateUrl: './CreateOrUpdateTransaction.html',
providers: [AccountTransactionsService]
})
export class CreateOrUpdateTransactionComponent {
closeResult: string;
modalRef: NgbModalRef;
#Input() transaction: Transaction = new Transaction();
#Input() isCreate: boolean;
#Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();
constructor(private modalService: NgbModal,
private transactionsService: AccountTransactionsService) {}
sendTransaction(): void{
let localModalRef = this.modalRef;
this.transactionsService.createOrUpdateTransaction(this.transaction, (isSuccessful)=>{
if (isSuccessful) {
this.onSubmit.emit(); //<--- The problem is here
localModalRef.close();
}
});
}
}
The HTML:
<table>
<caption>Account Transactions</caption>
<thead>
// Omitted thead
</thead>
<template let-transaction ngFor [ngForOf]="accountTransactions" let-i="index">
<tr data-toggle="collapse" [attr.data-target]="'#'+i">
// Omitted <td>s
<td> //<----These updateTransactions() are not being executed
<create-update-transaction [isCreate]="false" [transaction]="transaction" (onSubmit)="updateTransactions()"></create-update-transaction>
</td>
</tr>
<div class="container collapse" [attr.id]="i">
// some content
</div>
</template>
</table>
<create-update-transaction [isCreate]="true" (onSubmit)="updateTransactions()"></create-update-transaction>
//<---- This updateTransactions() successfully executes
Notice
If I only display one row in the table not using ngFor (keeping the call to the back-end to update the DB), it works perfectly fine.
Any idea why would this happen?
Thanks in advance!
Update1
Debugging i could notice that when on the create-mode the this.onSubmit.observers is an array with one observer and on the edit-mode its an array with 0 observers, so thats the problem. any idea why?
Update2
Debugging again and found that the this in this.transactionsService.createOrUpdateTransaction... is fine and its' onSubmit.observers contains 1 observer, before reaching the callback's code, in which the this.onSubmit.observers is an array of 0 observers
AccountTransactionsService:
#Injectable()
export class AccountTransactionsService{
private loggedBankAccount: number;
private queryObservable: ObservableQuery;
constructor(private userManagingService: UserManagingService) {
this.loggedBankAccount = userManagingService.getLoggedBankAccountNumber();
this.queryAccountTransactions();
}
queryAccountTransactions(): void{
this.queryObservable = // querying the back-end
}
createOrUpdateTransaction(transaction: Transaction, callback: (isSuccessfull: boolean) => void): void{
let isSuccessful: boolean = false;
client.mutate(/*inserting the backend*/).then((graphQLResult) => {
const { errors, data } = graphQLResult;
if (data) {
console.log('got data', data);
isSuccessful = true;
}
if (errors) {
console.log('got some GraphQL execution errors', errors);
}
callback(isSuccessful);
}).catch((error) => {
console.log('there was an error sending the query', error);
callback(isSuccessful);
});
}
getAccountTransactions(): ObservableQuery{
return this.queryObservable;
}
}
Notice
If i just execute the callback give to the AccountTransactionService.createOrUpdateTransaction (removing the call to the back-end to actually update the DB) it works perfectly fine and all the subscribers to this onSubmit event are being called.
this Console image
Set the null as a parameter :
this.onSubmit.emit(null);
So I found out the case was that the data the ngFor is bound to was being replaced by a new instance as I updated the backend, hence, it rerendered it's child Components causing reinitializing (destory + init) of them, which made the instance of the Component to be overwritten.
In order to solve this issue i have changed the querying of the accountTransaction to be only one time querying, on initializing of the parent component, and never refetching again (which triggers the rerendering).
Im displaying to the client the changes only if they succeeded on the server side, and if they failed i use a backup of the data, so the client is kept update of the real state of the server WITHOUT refetching
For the future lookers to come:
The key to the problem was that the Parent Component's *ngFor depended on data that was changing in the Child Components, causing reinitializing of the *ngFor (the Child Components) BEFORE finishing executions of the Child Components methods.
Hope it'll be helpful to somebody :)