Angular Chrome Api Data Binding Not Working

Question

I am working on chrome extension. I have a background.js to fetch data in specific conditions.

When the conditions meet am activating the pageAction
By the time user clicks extension icon I am sending a message to "background.js" and "background.js" replying me with data.

Although i'm updating component property but the change is not reflecting the UI.

background.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  sendResponse(this.data);
});

app.component.ts

import {Component, OnInit} from '@angular/core';


// @ts-ignore
const CHROME = chrome;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Title';
  response: any;

  constructor() {}

  ngOnInit() {
    CHROME.runtime.sendMessage({
      message: 'Give me data'
    }, response => {
      this.title = response.title;
      this.response = JSON.stringify(response);
      console.log(response.title);
    });
  }

  clickMe() {
    console.log('Before:' + this.title);
    this.title +=  ' !!';
  }
}

app.component.html

  <div style="text-align:center">
   <h1> Title: {{title}}</h1>
   <h1> Response: {{response}}</h1>
  </div>

<button (click)="clickMe()" >Click Me!</button>

As far as I concerned, I am updating app.component's property from another scope because of that Angular can't realize the data changed.

I have added a button when I click the button Angular detect the "title" field has been changed so it updates the UI.

How can I update UI from another context?

Update

Because of the changes has been made in another scope Angular couldn't detect the changes, so I have to force it:

constructor(private changeDetectorRef: ChangeDetectorRef) {}

  ngOnInit() {
    CHROME.runtime.sendMessage({
      message: 'Give me data'
    }, response => {
      //...
      this.changeDetectorRef.detectChanges();
    });
  }

Did you try using the arrow function syntax instead of `this` `that`? — SiddAjmera, Nov 06 '18 at 14:40
Yes I tried now but same result, data is in the console but UI didn't updated. — Muhammed Ozdogan, Nov 06 '18 at 14:43
The problem is solved, I have to force Angular to detectChanges, source : https://stackoverflow.com/a/35106069/7885651 — Muhammed Ozdogan, Nov 06 '18 at 18:03
Had same issue and your `changeDetectorRef` fix worked for me, thank you — Sergey Anisimov, Apr 13 '22 at 00:18

SiddAjmera · Answer 1 · 2018-11-06T14:51:05.853

I'm not really sure why you're using a Subject in the first place when you have everything in the same Component. Try getting rid of that and use the ngOnInit instead of the constructor.

import { Component, OnInit } from '@angular/core';

// @ts-ignore
const CHROME = chrome;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  title = 'Title';
  response: any;

  constructor() {}

  ngOnInit() {
    CHROME.runtime.sendMessage({
      message: 'Give me data'
    }, response => {
      this.title = response.title;
      this.response = response;
    });
  }
}

SiddAjmera I have updated the question can you help me please :) — Muhammed Ozdogan, Nov 06 '18 at 15:04

Angular Chrome Api Data Binding Not Working

1 Answers1