How can I show only the value 100 in the div below?
<div> {{uploadProgress | async | json}} </div>
The current value shown is:
[ { "filename": "Mailman-Linux.jpg", "progress": 100 } ]
Below my interface from .ts file:
interface IUploadProgress {
filename: string;
progress: number;
}
This uploadProgress | async gets the objects of the stream.
After the AsyncPipe it will probably print out [Object object]
Since this is now an object you can simple get the progress attribute like any other object.
Result should look like this:
<div> {{(uploadProgress | async).progress}} </div>
Additionaly when the observable you have is not an BehaviourSubject then you might want to add a safe navigation with ? after the Asyncpipe to prevent undefined errors:
<div> {{(uploadProgress | async)?.progress}} </div>
As ShamPooSham correctly mentions, it seems the result is an array. Therefore the answer should look like this:
<div> {{(uploadProgress | async)[0]?.progress}} </div>
<div> {{uploadProgress.progress}} </div>?