These are chat archives for angular/angular-2-ionic-2

12th
Apr 2017
Amr ElAdawy
@amreladawy
Apr 12 2017 02:35 UTC
I am not sure I understand it very well
You can privy share your code with me
Harald Wiesinger
@s3ppo
Apr 12 2017 08:43 UTC

@amreladawy i can try.. in my service i provide data like this:

return this.loginService.af.database.list(`/games/${userdata.gameid}/chat/`, filter).map(chats => {
                chats.forEach(chat => {
                    chat.member = this.membersService.get(chat.user);
                });
                return chats;
            });

so there is a observable in the observable.. and now i think that a unsubscribe to the first level(chats) is not enough.. i also need to unsubscribe the second level(members)

Harald Wiesinger
@s3ppo
Apr 12 2017 08:49 UTC
but please correct me if i am false :))
Amr ElAdawy
@amreladawy
Apr 12 2017 08:49 UTC
what do u mean by "unsubscribe" exactly?
Harald Wiesinger
@s3ppo
Apr 12 2017 08:53 UTC

this is the chat.service.ts where i provide data for the nodes in my page i do a

let chatObs = getChat().subscribe(data => lalala)

and later in the ngOnDestroy() of the page i do a:

chatObs.unsubscribe()

to give the memory free and if the logout button was clicked

@amreladawy i didnt found a better way to do this :(
Amr ElAdawy
@amreladawy
Apr 12 2017 08:55 UTC
@s3ppo I understood now, let me check this for a moment.
your first issue, is that the ngOnDestory is not fires?
fired?
is this right?
Harald Wiesinger
@s3ppo
Apr 12 2017 08:56 UTC
yes exactly
but only if the logout clicked in the popover
in the sidemenu its working
Amr ElAdawy
@amreladawy
Apr 12 2017 08:57 UTC
and the second issue is that you want to do unsubscribe while there is a logout press any where
oh
that is more precise!
can you share the code that you use to navigate to the login page when logout button is pressed
Harald Wiesinger
@s3ppo
Apr 12 2017 08:58 UTC
1 minute i try :)
this is from inside the popover
    logout(): void {
        this.viewCtrl.dismiss().then(() => {
            this.events.publish('user:logout');
            this.nav.setRoot(LoginComponent)
        })
    }
Amr ElAdawy
@amreladawy
Apr 12 2017 09:02 UTC
I assume that you have a PopOverPage as a separate component with that logic
Harald Wiesinger
@s3ppo
Apr 12 2017 09:02 UTC
yeah exactly
Amr ElAdawy
@amreladawy
Apr 12 2017 09:02 UTC
what happen to the oberservable in the code? why did u remove it?
Harald Wiesinger
@s3ppo
Apr 12 2017 09:03 UTC
that was the wrong one.. :) mom coding following :)
Amr ElAdawy
@amreladawy
Apr 12 2017 09:03 UTC
So, you dont have access to the obersable in the popover, correct?
Harald Wiesinger
@s3ppo
Apr 12 2017 09:04 UTC
this is in my app.component.ts
    //Wait for the logout Event to unsubscribe Chat
    this.events.subscribe('user:logout', () => { 
      if(this.chatObs) {
        this.chatObs.unsubscribe();
        this.logout(); 
      }
    })
yes exactly.. the chat is running in my right sidemenu.. so i had to code it in app.component.ts
Amr ElAdawy
@amreladawy
Apr 12 2017 09:05 UTC
so, that is cool. I think this should work. and you dont need to do anything in the ngOnDestory()
you are raising the event from the popover. and handling it in the app.component
what is the problem with that code so far?
Harald Wiesinger
@s3ppo
Apr 12 2017 09:06 UTC
yes but now.. i got a error.. that my observable in the observable has no authorization to access member data
which is embedded in the chatObs
Amr ElAdawy
@amreladawy
Apr 12 2017 09:09 UTC
can you please type the exact error message here
Harald Wiesinger
@s3ppo
Apr 12 2017 09:10 UTC
its a error from angularfire2 that i have no auth.. if you want a screenshot i need 3 min to start my notebook :)
Harald Wiesinger
@s3ppo
Apr 12 2017 09:16 UTC
blob
@amreladawy so i think the logout is faster finished than the unsubscribe.. or the member Observable embedded in the chat Observable is not unsubscribed
Amr ElAdawy
@amreladawy
Apr 12 2017 09:22 UTC
let check that
yes, you are correct.
so we need a way to defer the logout when the unsubscribe is compelted
Harald Wiesinger
@s3ppo
Apr 12 2017 09:25 UTC
i commented the line with the map and now its working
but now im missing my user names in the chat :D
Amr ElAdawy
@amreladawy
Apr 12 2017 09:28 UTC
why would the "map" line has anything to do with the error?
I dont understand that
Harald Wiesinger
@s3ppo
Apr 12 2017 09:29 UTC
sorry that was my bad, what i was doing was this:
return this.loginService.af.database.list(`/games/${userdata.gameid}/chat/`, filter).map(chats => {
                chats.forEach(chat => {
                    //chat.member = this.membersService.get(chat.user);
                });
                return chats;
            });
Amr ElAdawy
@amreladawy
Apr 12 2017 09:29 UTC
I know that you did that, but I dont understand why this would help solving the problem
Harald Wiesinger
@s3ppo
Apr 12 2017 09:30 UTC
its not solved, it was just a test for the question if logout to fast or the observable in observable was the issue ;)
sorry for my bad english
Amr ElAdawy
@amreladawy
Apr 12 2017 09:31 UTC
It is ok, so we know that logout completes before unsubscribe.
tell me, what is the return of the unsubscribe()
Harald Wiesinger
@s3ppo
Apr 12 2017 09:32 UTC
uhm no.. i dont think so.. i think the embedded member Observable needs a separate unsubscribe
but this is not working: this.chatObs.members.unsubscribe();
i have no idea how to do it :(
Prajwal GP
@prajwalgp
Apr 12 2017 13:06 UTC
The div click event is overidden by the ion-input and the div has item-left
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:37 UTC
Is there someone here please ??
Amr ElAdawy
@amreladawy
Apr 12 2017 18:38 UTC
shoot
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:39 UTC
My Dear sir i have a template composed by CSS HTML and JS is there a way to integrate it on Angular 2
Amr ElAdawy
@amreladawy
Apr 12 2017 18:40 UTC
The answer is yes, but as long as you are going to use ionic2, then it is better to use the ionic ready made component instead of HTML
and move your js code inside the TS files
the CSS can stay the same
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:41 UTC
No i'm going only to use Angular2
not Ionic2
For the moment i want to run it on my desktop
and want to integrate this http://codepen.io/balapa/pen/embYYB on my template
don't know how to do it the HTML AND CSS is working but the JS don't know where to put it !
Amr ElAdawy
@amreladawy
Apr 12 2017 18:42 UTC
So, as long as you will stick to angular, then you can keep the HTML and CSS , for the JS it is better to move it TS files and avoid directly manipulating DOM
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:43 UTC
how can i move the css to the TS file ? could you explain it to me sir @amreladawy
Amr ElAdawy
@amreladawy
Apr 12 2017 18:44 UTC
in angular 2, the component (page) is made (usually) of three parts
  1. page.component.ts the ts code for the page the controller class
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:45 UTC
awesome so is it ok to put all the JS code there ?
Amr ElAdawy
@amreladawy
Apr 12 2017 18:45 UTC
  1. page.html which is the html part
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:46 UTC
```var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");

$mainButton.on("click", function(){
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
});

$closeButton.on("click", function(){
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});

// copy
balapaCop("Material Overlay Animation", "#777"); ```

Amr ElAdawy
@amreladawy
Apr 12 2017 18:46 UTC
and finally the page.scss which is the css styles linked to the page
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:47 UTC
so @amreladawy where should i put this code ?
Amr ElAdawy
@amreladawy
Apr 12 2017 18:47 UTC
This code shall go to the ts file
but
this code is directly accessing the dom $(".close-button")
that is not ok in angular.
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:48 UTC
is there another alternative to get something like i linked before ?
i'm talking baout the codepen
i want to do something similar with Angular
Amr ElAdawy
@amreladawy
Apr 12 2017 18:49 UTC
You can still use what is in the code pen
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:49 UTC
( Thank you soo much sir for the explanation )
yes i did, but the button part will not work
Amr ElAdawy
@amreladawy
Apr 12 2017 18:50 UTC
but instead of wiring the click events directly , you have to use the angualr way of binding events and handling them.
Al Falah Taieb
@AlFalahTaieb
Apr 12 2017 18:52 UTC
:clap: Thank you soo much !!!