Angular5 - google contacts api integration - The values are changed in component but not reflecting in HTML

Question

I have integrated the google contacts in the website successfully. But the problem is, the contacts is not listed in the html even after assigns those to the component variables. ie.

On clicking the google button, it opens up a new window and closes after authentication. We are fetching the contacts using the token and getting properly, but the html part is not reflecting until we do a click or keypress .

component.ts

import { Component, OnInit, TemplateRef, Input, ViewChild } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { Router } from '@angular/router';
import { AbstractControl, FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { UserService } from '../../services/user-service';

@Component({
  selector: 'app-slide-panel',
  templateUrl: './slide-panel.component.html',
  styleUrls: ['./slide-panel.component.css']
})
export class SlidePanelComponent implements OnInit {
googleContacts = [];
constructor(private modalService: BsModalService, 
        private router: Router,
        private formBuilder: FormBuilder, private userService: UserService) {
  }
onGettingGoogleContacts(gcontacts: any) {
this.googleContacts = gcontacts;
}
}

component.html

 <google-signin (gotGoogleContacts)="onGettingGoogleContacts($event)"></google-signin>
<div class="select-from-list" *ngIf="googleContacts.length > 0">
    <ul>
        <li class="clearfix" *ngFor="let contact of googleContacts">
            <div class="checkboxnew">
                <input type="checkbox" class="checkbox"><i></i>
                <h5>{{contact.firstName}} {{contact.lastName}}<span>{{contact.email}}</span></h5>
            </div>
        </li>
    </ul>
    <div class="text-right">
        <button class="btn btn-lg btn-link" (click)="formType = 'inviteColleague'">Cancel</button>
        <button class="btn btn-lg btn-primary">Import</button>
    </div>
</div>

child-component.ts

import { Component, OnInit, ElementRef, AfterViewInit, EventEmitter, Input, Output  } from '@angular/core';
import { UserService } from '../../services/user-service';
import { environment } from '../../environments/environment';

declare const gapi: any;

@Component({
  selector: 'google-signin',
  templateUrl: './google-signin.component.html',
  styleUrls: ['./google-signin.component.css']
})
export class GoogleSigninComponent implements AfterViewInit {
    @Output() gotGoogleContacts = new EventEmitter<boolean>();

    private clientId:string = environment.google_contacts_client_id;
    private scope = [
        'https://www.googleapis.com/auth/contacts.readonly',
    ].join(' ');

  constructor(private element: ElementRef, private userService: UserService) {

  }

  ngOnInit() {
  }

  public auth2: any;

  /**
   * Inialize google signin config
   */
  public googleInit() {
    gapi.load('auth2', () => {
      this.auth2 = gapi.auth2.init({
        client_id: this.clientId,
        cookiepolicy: 'single_host_origin',
        scope: this.scope
      });
      this.attachSignin(this.element.nativeElement.firstChild);
    });
  }

  /**
   * Attach signin process and get the google contacts
   * @param Object  element
   */
  public attachSignin(element) {
    this.auth2.attachClickHandler(element, {},
       (googleUser) => {
        this.userService.getGoogleContactsData(googleUser.getAuthResponse().access_token)
        .subscribe((data) => {
            if (data) {
                this.passGoogleContacts(data.feed.entry || []);
            }
        });
      }, (error, data) => {
            this.passGoogleContacts([]);
      });
  }

  ngAfterViewInit() {
    this.googleInit();
  }

  /**
   * Pass google contacts to the parent
   */
  passGoogleContacts(contacts: any) {
    this.gotGoogleContacts.emit(contacts);
  }

}

user-service

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
import { environment } from '../environments/environment';
import { Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { Http, ResponseContentType } from '@angular/http';

@Injectable()
export class UserService {

    constructor(
        public _http: HttpService) { }


    getGoogleContactsData(token) {
        return this._http.request(endUserApi.googleContactsApiUrl + `&access_token=${token}`)
            .map(res => res.json());
    }
}

I this code the function onGettingGoogleContacts() is called from the child component when the contacts is getting.

I used this mechanism to get the contacts.

Any solution to automatically reflect those changes in the html?

Answer 1

It seems that you're using the API to updating some object without changing the object itself. Can you show use your api integration ? do you use rxjs or smoething like that ? Or a simple callback / promise ?

If so, maybe try something like that

onGettingGoogleContacts(gcontacts: any) {
   this.googleContacts = ...gcontacts;
}

this will create a clone of your data, and thus provoque the reflecting