Angular won't assign property value from another

Question

Recently I started learning Angular but I faced an issue today. I have the following Component:

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../home/shared.service';
import { IData } from '../data/IData';

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

  data: IData;
  symbols: number = 150;
  showReadMore = true;
  contentToShow: string = "";

  constructor(private _sharedService: SharedService) { }

  ngOnInit() {
    this.data = this._sharedService.sharedData;
    this.contentToShow = this.data.content;
  }

  readMore() {
    //this.symbols += 100;
  }
}

The "data" property is an object with the following properties: title (string), authorId (number) and content (string).

I have also followed the solution of this post and made this service:

import { Injectable } from '@angular/core';
import { IData } from '../data/IData';

@Injectable()
export class SharedService{

    sharedData: IData = {
        title: "",
        authorID: 0,
        content: ""
    };

    insertData(data: IData){
        this.sharedData.title = data.title;
        this.sharedData.authorID = data.authorID;
        this.sharedData.content = data.content;
    }
}

And I have view for the Component as well:

<div *ngIf="data.title">
    <h1>{{ data.title }}</h1>
    <h5>Author ID: {{ data.authorID }}</h5>
    <div>
        <span>{{ contentToShow }} </span>
        <span>
            <a href="#" *ngIf="showReadMore" (click)="readMore()">Read More &#8618;</a>
        </span>
    </div>
</div>

Here comes my problem. The "contentToShow" property seems to be undefined and I find this strange... However if I try to use "data.content" it works just fine and displays my data. What is happening? I am tring to resolve it for 2 hours and I am starting to think it must be something really obvious but I do not know what... Thank you!

In the ngOnInit what do you get if you console.log(this._sharedService.sharedData); ?? — devDan, Mar 03 '19 at 19:29
"sharedData" shoud hold my data. If I console.log(this._sharedService.sharedData); in ngOnInit it logs object with my properties but they are empty... — Svetoslav Nedelchev, Mar 03 '19 at 19:32
what is responsible for getting data is it a http request and what is the function called, if youcould edit it in that would help, you need to run it first. — devDan, Mar 03 '19 at 19:34
I have one more Component that passes the data to the Shared Service. In that Component I call insertData, but it does not to be problematic... — Svetoslav Nedelchev, Mar 03 '19 at 20:03
as of now it looks like in your SharedService the sharedData is empty and it will get populated once you call insertData. Just for fun try to initialize your sharedData with some test data. Can you see them on the page? — robert, Mar 03 '19 at 20:05
I tried to hardcore some test data in the SharedService Component -> https://pastebin.com/Az5XVhJr nothing displayed... — Svetoslav Nedelchev, Mar 03 '19 at 20:10

Batajus · Accepted Answer · 2019-03-03T20:57:23.690

At the point you assign the value of data.content to contentToShow the property isn't set, so contentToShow seems not to be set. You need to know that Javascript works with "call-by-reference", but it works only with Arrays or Objects and not with Primitives (like string, number, etc).

Because of that you see some value, when you're using data.content. Because you access the property directly from the object and the changed value is displayed in the html.

For better understand this post Is JavaScript a pass-by-reference or pass-by-value language? can help.

Two ways to solve your problem can be: You can use data.content or you can notify your component that the values have changed, e.g. by using an Observable.

The last can look something like this:

@Injectable()
export class SharedService{
    notfiySubject: Subject< IData > = new Subject();

    ...
    insertData(data: IData){
        this.sharedData.title = data.title;
        this.sharedData.authorID = data.authorID;
        this.sharedData.content = data.content;
        // Emits the subject
        this.notifySubject.next(this.sharedData);
    }
}

And in you component you would subscribe to that Subject:

this._sharedService.notifySubject.subscribe(data => {
    // Here you can set `contentToShow` with data or _sharedServices.sharedData
});

Thank you so much for the explanation! But what do you mean by "wait for the setting of the property"? — Svetoslav Nedelchev, Mar 03 '19 at 20:44
I think this resolves my issue. Now I have to read some documentation to understand exactly how this works. Thank you so much :) — Svetoslav Nedelchev, Mar 03 '19 at 21:16

robert · Answer 2 · 2019-03-03T21:05:54.113

The problem is that your "contentToShow" is a primitive type (string) and it is initialized in ngOnInit (and only there). Once you update sharedData it is updated correctly but the connection between contentToShow and this.data.content is lost. Actually it wasn't there.

So this will never work:

<span>{{ contentToShow }} </span>

Instead you must keep the reference to the object from your dataService like this:

<span>{{ data.content }} </span>

UPDATE: If you still want to customize your output using "contentToShow" then you must get notified about changes. One way to do it is to have a Subject in your "dataService" like this:

dataChanged = new Subject<any>();

Once this subject is in place you can update your "insertData" method with this as a last line:

    this.sharedData.content = data.content;
    this.dataChanged.next(); // <-- this will send the notification
}

Inside your "CurrentArticleComponent" (ngOnInit) you need to subscribe to this notifications and update "contentToShow" like this:

this._sharedService.dataChanged.subscribe(() => {
  this.contentToShow = '??? ' + this.sharedService.sharedData.content + ' ???';
})

StackBlitz

Thanks for the answer! So how can I make a "copy" then? What I need to do is to make some manipulations of that "contentToShow" and still save the original value. How can I do that? Thanks again! — Svetoslav Nedelchev, Mar 03 '19 at 20:26

Vadi · Answer 3 · 2019-03-03T20:29:09.030

Based on this answer it uses similar solution, but the problem with OP's code is that this:

this.contentToShow = this.data.content;

doesn't work because it doesn't reference to the object data like in the example above. this.contentToShow is a string and each time the data will be changed by the _sharedService it doesn't know anything about those changes, unlike in the case of using it like this this.data = this._sharedService.sharedData. Now both this.data and this._sharedService.sharedData point to the same object.

However if I try to use "data.content" it works just fine and displays my data.

It works because component uses the reference to the same object and get updated when changes occurred.

So the solution is using this.data in component.ts and in template:

// component
ngOnInit() {
  this.data = this._sharedService.sharedData;
}


// template
<div *ngIf="data.title">
<h1>{{ data.title }}</h1>
<h5>Author ID: {{ data.authorID }}</h5>
<div>
    <span>{{ data.content }} </span>
    <span>
        <a href="#" *ngIf="showReadMore" (click)="readMore()">Read More &#8618;</a>
    </span>
  </div>
</div>

Aniruddha Das · Answer 4 · 2019-03-03T20:09:26.820

-1

http calls are asyn in nature!

Let me explain. Initially, you set the value of contentToShow to "" which is a blank string and fine for angular but in the ngOnInit() call, you set this.contentToShow = this.data.content

The this._sharedService.sharedData might be not set or waiting server to response for which it might be undefined also the initial value of data: IData; in undefined, so this.data.content will be undefined after ngOnInit() call.

To fix this error you can set an this.contentToShow in init method only if the this.data.content is available by below code.

set your initial data and content:

 data: IData = { content: '' };

or else you can set to '' in the init call.

ngOnInit() {
    this.data = this._sharedService.sharedData;
    this.contentToShow = this.data && this.data.content || '';
}

edited Mar 03 '19 at 20:09

answered Mar 03 '19 at 19:43

Aniruddha Das

20,520
23
96
132

Thank you so much for the reply, but it seems the following code does not resolves my issue... Is it possible that you have missed something? – Svetoslav Nedelchev Mar 03 '19 at 19:48
1

"Services are asyn in nature!" - is a bit strange. – robert Mar 03 '19 at 19:59
more specific http calls are async in nature where service waits to get data from the backend. I corrected my answer. – Aniruddha Das Mar 03 '19 at 20:10
What error you are getting, is the same error. try to set the data initially – Aniruddha Das Mar 03 '19 at 20:12
I don't get any errors. If I try to use "data.content" in the view it wokrs, but if I create a new propery -> this.contentToShow = this.data.content; and try to use it in the view, nothing shows... – Svetoslav Nedelchev Mar 03 '19 at 20:14
try this `this.contentToShow = this._sharedService.sharedData.content;`. directly set the value from service not the this.data – Aniruddha Das Mar 03 '19 at 20:17
this is the process, look into your code if you see any issue. it should work – Aniruddha Das Mar 03 '19 at 20:22

Angular won't assign property value from another

4 Answers4