<div>
Where is getTotalValue being updated. You have not given us the code we need to see to answer your question. For your component to update something has to update getTotalValue - where is that happening?
</div>

<div>
Ok so yes i was laying out the concept. &nbsp;Here is more exact code below. home.component.html&nbsp; (data panel is where the component html isnt updating) <pre><code class="code-10 nolinks" id="code-20-43325620-1">&lt;main id="main-content" class="content-wrapper"&gt;
&nbsp; &lt;h1&gt;Technology Need Administrative Portal&lt;/h1&gt;


&nbsp; &lt;section&gt;
&nbsp; &nbsp; &lt;app-datapanel&gt;&lt;/app-datapanel&gt;
&nbsp; &lt;/section&gt;


&nbsp; &lt;section&gt;
&nbsp; &nbsp; &lt;app-homegrid&gt;&lt;/app-homegrid&gt;
&nbsp; &lt;/section&gt;
&lt;/main&gt;
</code></pre> datapanel.component.html <pre><code class="code-1 nolinks" id="code-20-43325620-2">&nbsp;&lt;div class="col mb-4"&gt;
&nbsp; &nbsp; &lt;div class="card bg-light h-100" tabindex="0"&gt;
&nbsp; &nbsp; &nbsp; &lt;div class="card-in"&gt;
&nbsp; &nbsp; &nbsp; &lt;i class="bi bi-laptop bi-size"&gt;&lt;/i&gt;&lt;span class="i-font"&gt;Available Inventory: {{availableCount}}&lt;/span&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &lt;/div&gt;
</code></pre> datapanel.component.ts <pre><code class="code-1 nolinks" id="code-20-43325620-3"> getAvailableCount(entityName: string, entityNumber: string) {
&nbsp; &nbsp; this.dataService.getPCInventory(entityName, entityNumber).subscribe(response =&gt; {
&nbsp; &nbsp; this.availableCount = response.toString();
&nbsp; &nbsp;// console.log(this.availableCount); &nbsp;(this console.log is getting updated value but datapanel html wont update)


&nbsp; &nbsp; });
&nbsp; }
</code></pre> data.service.ts <pre><code class="code-10 nolinks" id="code-20-43325620-4">&nbsp;getPCInventory(entityName: string, entityNumber:string){
&nbsp;
&nbsp; &nbsp; this.apiUrl = environment.apiUrl + 'api/Forms/GetPCInventory?entityName=' + entityName + &nbsp;'&amp;entityNumber=' + entityNumber;
&nbsp;


&nbsp; &nbsp; return this.http.get(this.apiUrl,httpOptions);


&nbsp; }

</code></pre> 
</div>

Developer II

Steve Hougom

<div>
First off thank you so much I love your idea! &nbsp; And yes the first post i did was sort of mock scenario. The second was more as is my actual code so yes you were correct in assuming that availableCount represents getTotalValue that I made up in first post. &nbsp; And I will do a better job with the code brackets next time posting code thanks im going to try this out now!
</div>

<div>
Never mind i just declared the behavior subject as type any and that worked!!&nbsp; &nbsp;Thanks Julian!!
</div>

<div>
<blockquote>Never mind i just declared the behavior subject as type any and that worked!!&nbsp;</blockquote>You should avoid doing that - it sort of defeats the purpose of using TypeScript. If you are going to only be displaying the number then you can change the &lt;number&gt; to &lt;string&gt; in the various places where it is being used. Otherwise when you next the value just do <pre><code class="code-1 nolinks" id="code-20-43326090-1">this.availableCount$.next(count as number);
</code></pre>Otherwise glad you are sorted.
</div>

<div>
<div class="content wysiwyg-content fr-view">
In angular we can make our html to have seperate sections of components which is pretty neat. BUT. &nbsp;Sometimes I cant get changeDetection to work. e.g host html page &lt;section&gt; &nbsp; &nbsp;&lt;app-component-section1&gt;&lt;/app-component-section1&gt; &lt;/section&gt; &lt;section&gt; &nbsp; &nbsp;&lt;app-component-section2&gt;&lt;/app-component-section2&gt; &lt;/section&gt; app-component-section1 &nbsp; &nbsp; &nbsp; html &lt;span&gt;{{getTotalValue}}&lt;/span&gt; &nbsp;THIS IS NOT UPDATING when value below is changed. app-component-section1 &nbsp; &nbsp; &nbsp;typescript getTotalValue: string; service&nbsp;call to get api data from sql server etc GetTotalValue(){ &nbsp; &nbsp;//return api data &nbsp; console.log(response.toString()); &nbsp; //this value updates as expected } I have tried change detection but it isnt working. &nbsp; &nbsp;
</div>
</div>

In angular we can make our html to have seperate sections of components which is pretty neat.
BUT.  Sometimes I cant get changeDetection to work.
e.g
host html page
<section>
   <app-component-section1></app-component-section1>
</section>
<section>
   <app-component-section2></app-component-section2>
</section>
app-component-section1      
html
{{getTotalValue}}  
THIS IS NOT UPDATING when value below is changed
.
app-component-section1      
typescript
getTotalValue: string;
service 
call to get api data from sql server etc
GetTotalValue(){
   //return api data
  console.log(response.toString());  
//this value updates as expected
}
I have tried change detection but it isnt working.

Angular component section of a page wont refresh data

Angular is a JavaScript open-source web application framework used to develop single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–view-model (MVVM) architectures, along with components commonly used in rich Internet applications. Angular is the front-end part of the MEAN stack, together with Node.js runtime, Express.js backend framework and MongoDB database.