Angular 2 and Reactive Vars?

angular
1

I am trying to setup a reactive variable that will update the component template from a callback. Cannot seem to figure it out. I can update the variables, and if I change the view the template shows the updates, but not before. I would like it to automatically update when data returns. Thusly…

This works fine.

export class MainUI extends MeteorComponent implements OnInit {

public username:string = '''; 
public profileImage:string ='';

constructor( private router: Router) {
    super();
}

ngOnInit() {
    this.loadProfile();
}

loadProfile(){
    Meteor.call("retrieve.profile", Meteor.userId(), (error, result)=>{
        if(error){
            console.log(error.toString());

        } else {
            console.log(result);
            this.username = result.username;
            this.profileImage = result.profileImage;
        }
    });
}

}

Template included this, which does not update when the variables do. No doubt something simple … new with this stack.

       <div [hidden]="currentUser" class="logout">
             <img [hidden]="profileImage==''" class="img-fluid center-block img-circle logo" src="{{profileImage}}">
             <p [hidden]="username==''" class="text-md-center">{{username}}</p>
             <a (click)="logout()" type="button" class="btn btn-block b-spacers text-lg-left btn-secondary"><i class="fa fa-sign-out text-lg-left"> </i> Logout</a>
         </div>
2

Hi
You should not use a Meteor.call for this. Just extend your class with MeteorComponent and use publish/subscribe for it. beside that I don’t think its necessary to send Meteor.userId(), you rather get with this.userId the logged in userId from the server directly:
`
class UserList extends MeteorComponent {
userId:string;

constructor() {
    super();

    this.subscribe('userProfilePub', userId, () => {
            this.user = Meteor.users.findOne(userId);
    }, true);

}
}
`

Here you find the reactive sub/pub docs: http://www.angular-meteor.com/api/angular2/0.4.2/meteorComponent

Cheers

3

Except that:

  1. the whole user data should not be returned to the client – security issues
  2. The call is using the secret user oAuth data to make an external API call to get the data needed. Thus not stored in the user data set.
4

Not sure if I understand your usecase.
For 1)
To restrict which data is send to the client you use the {fields:{_id:1,profile:1}}inside of the options of your cursor: Meteor.publish(function(userId){ return Meteor.users.find(userId,{fields:{_id:1,profile:1}})}).
For 2)
You can make a call to an external API inside of your publication before you return your cursor.