DEV Community: ahmedsaba

How to add progress bar when click upload button?

ahmedsaba — Fri, 13 Aug 2021 18:36:03 +0000

I work on angular 8 application I need to add progress bar

when click upload button so progress bar will work when click

button upload until finish upload

upload service

PostUpload(file)
{
const formData: FormData = new FormData();
formData.append('file', file,file.name);
return this.http.post('http://localhost:61265/api/DeliverySys/', formData,{responseType: 'blob'});
}
component upload.ts

public uploadFile = () => {
this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)

.subscribe((response: Blob) => saveAs(response, this.fileToUpload.name + '.xlsx'));
}
component upload.html

How to solve error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.?

ahmedsaba — Fri, 30 Jul 2021 15:17:22 +0000

I work on angular 11 I face error when build angular app

ERROR in src/app/Employee-list/employee-list.component.html:22:45 - error NG8002: Can't bind to

'routerLink' since it isn't a known property of 'a'.
Staff List
and below is package json file

"@angular/animations": "^11.2.14",
"@angular/cdk": "^12.1.3",
"@angular/common": "^11.0.0",
"@angular/compiler": "^11.0.0",
"@angular/core": "^11.0.0",
"@angular/forms": "^11.0.0",
"@angular/material": "^11.2.13",
"@angular/router": "^11.2.14",
"@angular/cli": "^11.0.0",
"@angular/compiler-cli": "^11.0.0"

on application module I do as below :

import { RouterModule } from '@angular/router';

@NgModule({

imports: [
RouterModule
so How to solve issue ?

sample of app modules and component employee list exist as blow

https://stackblitz.com/edit/angular-uffug5?file=src%2Fapp%2FEmployee-list%2Femployee-list.component.ts
image for issue

Value of count rows variable give me undefined although I assign it?

ahmedsaba — Sun, 11 Jul 2021 07:46:36 +0000

I work on angular 7 I face issue count rows variable give me undefined value

although returned data is 3

Expected result I need is Count rows must equal 3

public Countrows:Number;
ngOnInit(): void {
countitems()
console.log("final count rows is" + this.Countrows);

}
countitems()
{
this._inventory.GetcountItems().subscribe(
data =>this.Countrows=data[0].countItems

)
}
it give me final data undefined although returned data value is 3

data returned on count items function

[
{
"countItems": 3
}
]
What I have tried:

console.log("final data" + data[0].countItems)
give me on console as
final data 3