how i can use an output as input?

Question

i try to use the output from component "event-settings" as input by the component "events-list" how i can solve this problem ?

<ion-content padding>
    <button ion-button type="button" class="showFilterBtn" (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed" >
      Show Filter
    </button>

    <event-settings [eventName]="false" [accompaniment]="false" [hidden]="isCollapsed" (searchedEvents)="getSearchedEvents($event)"></event-settings>
    <events-list *ngIf="this.events!= 'undefined'" [events]="this.events"></events-list>
</ion-content>

My Output is an Eventemitter called seachEvents

public searchEvents(){

    let startdatetime= this.start.split("T");
    let startdate = startdatetime[0].split("Z")[0];
    let starttime = startdatetime[1].split("Z")[0];

    let enddatetime = this.end.split("T");
    let enddate = enddatetime[0].split("Z")[0];
    let endtime = enddatetime[1].split("Z")[0];

    this.EventService.getEventsByFilter(this.userId,this.age,startdate,enddate,this.musicDirection,
        this.maxPerson,this.country,this.federaleState,this.city)
        .forEach((events) => {
            this.searchedEvents.emit(events);
        });
}

and this.events (observable) is data from my ouput

score 0 · Answer 1 · answered Apr 14 '18 at 17:46

0

You'd need to use a rxjs observable or subject. The other option is to use a service and is detailed in this answer https://stackoverflow.com/a/35878524/3211852

answered Apr 14 '18 at 17:46

David

1,276
13
23

score 0 · Accepted Answer · answered Apr 14 '18 at 20:35

0

First remove "this" in front of the input variable it can fix it.

If not there is an easiest solution than RxJs. First I guess your function for setting getSearchEvents change the event variable ? (Add your code if possible)

So When you emit the event you change the variable event and let your event list know every time about it using a setter :

event = new Event();
@Input() set eventChange(event) {
    this.event = event;
}

In your HTML replace [event] with [eventChange] and you are done ;)

answered Apr 14 '18 at 20:35

andrea06590

1,063
1
8
18

hey, thanks for the answer! but i cant write new Event(); because Event needs parameters – leo180593 Apr 16 '18 at 15:46
It was a sample class name, you can write event: any = null; – andrea06590 Apr 16 '18 at 15:55
Please explain what error you have because it not working is too general – andrea06590 Apr 17 '18 at 16:18
i get the events in console.log but the rendering in events-list not working – leo180593 Apr 17 '18 at 16:28
– leo180593 Apr 17 '18 at 16:28
ok the name was wrong but now i get "this _subscribe is not a function – leo180593 Apr 17 '18 at 16:44
There is no subscribe using event emitter remove that subscribe it only works with observable and behavior subject – andrea06590 Apr 17 '18 at 17:10

how i can use an output as input?

2 Answers2