Display async values on Angular2 Modal

Question

I will preface that I am quite new to Angular2. I am trying to display async data on a modal, modal is rendering prior to variables updating.I would prefer to see my variables displayed.

The variables are winnername & winnerurl, Subject code is at the bottom of the .ts and .html snippets.

Thank You in advance for any input.

import { Component, ViewChild, OnInit } from '@angular/core';
import { FormsModule } from "@angular/forms"; 
import { findfriendService } from '../findfriend.service'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  providers: [ findfriendService ]
})

export class SearchComponent implements OnInit {


@ViewChild('myModal') modal: any; 

constructor(private _findfriendService: findfriendService) { }
 
//Submit form
onSubmit(f){
console.log("from click: ", f);

  //post form data to MongoDB
  this._findfriendService.postFriend(f);

  //get all current friends from Mongo DB 
  this._findfriendService.getFriends()
  .subscribe(allFriends =>{
  
      { CODE REMOVED FOR EASE OF VIEWING }
      
      // Code resulting value being assigned to variable index
     for(var a=0;a<plyrsDiff.length;a++){
       var b = plyrsDiff[a];
       if(plyrsDiff[a]<c){
         c = b; 
         index = b; 
       }
    }
    //CONSOLE LOG DISPLAYS VALUES CORRECTLY
    winnername = allFriends[index].firstName;
    winnerurl = allFriends[index].url;
    this.modal.open(); 

  })
}

<div class="container">
    <div class="jumbotron">

    <!--**** Begin of Form  ***********************************-->
    <!--Form variable #f declared -->
    <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
        <div class="form-group">
            <!--Enter First Name-->
            <label 
                for="firstName">First Name.
            </label>
            <input 
                ngModel name="firstName" 
                #firstName="ngModel"
                class="form-control"
                required
                minlength="3">
                <!-- Show Error if invalid -->
                <div 
                    *ngIf="firstName.touched && firstName.errors">
                    <div 
                        class="alert alert-danger"
                        *ngIf="firstName.errors.required">
                        First name is required
                    </div>
                </div>
           

            <!-- Loop generates 10 user questions-->
                <div  
                    *ngFor="let question of questions; let in = index"> 
                <h5>
                    {{question.q}}
                </h5>
                <!-- display questions, generate select options, assign variable unique to question for ngModel - name - id-->
                <select 
                    required 
                    [(ngModel)]=numbers[in] 
                    name={{question.id}} 
                    id={{question.id}}>  
                    <option   
                        *ngFor="let choice of choices" 
                        [ngValue]="choice">{{choice.label}}
                    </option> 
                </select>
            </div>

     
            <button  
                [disabled]="!f.form.valid" 
                type="submit" 
                class="btn btn-danger btn-lg">Submit
            </button>
        </div>
        
         <modal #myModal>
            <modal-header>
                <h1>ALERT</h1>
            </modal-header>
            <modal-content>
            
                <img  src="{{winnerurl}}" height="160">
            </modal-content>
            <modal-footer>
                <button class="btn btn-primary" (click)="myModal.close()">close</button>
            </modal-footer>
        </modal>
    </form>
     
</div>
</div>

what is the issue can you create a plunker? – Aravind Apr 18 '17 at 00:34 — Aravind, Apr 18 '17 at 00:34

score 0 · Answer 1 · answered Apr 18 '17 at 01:02

0

Since you are subscribing to ._findfriendService.getFriends() you can't use the async pipe inside your template because you are getting the data already. You need to check if the winnerurl or winnername is not null then you can show the modal. Try to put *ngIf in your modal like this

<modal #myModal *ngIf="winnerurl">
        <modal-header>
            <h1>ALERT</h1>
        </modal-header>
        <modal-content>

            <img  src="{{winnerurl}}" height="160">
        </modal-content>
        <modal-footer>
            <button class="btn btn-primary" (click)="myModal.close()">close</button>
        </modal-footer>
    </modal>

Hope this helps.

answered Apr 18 '17 at 01:02

brijmcq

3,354
2
17
34

Thank you for the response, unfortunately this results in a 404 error "cannot get / search ". – mjr_river Apr 18 '17 at 01:26
Hmmm, that is weird because you just insert a *ngIf in your modal. What happens if you remove *ngIf? – brijmcq Apr 18 '17 at 01:52
I render a modal without variable being displayed. – mjr_river Apr 18 '17 at 01:54
I tried to find your 'winnername' and it is missing in your template. The *ngIf prevents this kind of error because it will not be displayed. – brijmcq Apr 18 '17 at 02:15
I had not added it to be displayed yet, trying to get one to work first. Both same issue thought when I tried it. – mjr_river Apr 18 '17 at 04:15
Whats the log message? Does it read the data from the service? – brijmcq Apr 18 '17 at 07:12
The service works fine for everything except getting the variable to display, the error is induced with the *ngIf while waiting for the variable. – mjr_river Apr 18 '17 at 14:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142027/discussion-between-brijmcq-and-mjr-river). – brijmcq Apr 19 '17 at 00:16

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

Answer is found here in similar question on Stack Overflow.

Wait for Angular 2 to load/resolve model before rendering view/template

edited May 23 '17 at 12:34

Community

1
1

answered Apr 19 '17 at 01:18

mjr_river

147
1
2
12

Display async values on Angular2 Modal

2 Answers2