Angular 6: Dashboard- unique Id in an ngFor
0
I have created a dashboard in which there is ngFor which is printing
inside each *ngFor i have created two components a side nav and main page when we click on side nav link it calls a component by the help of service. On nav click I am passing a message from service and it opens that component. But,the issue is when I am calling component through side nav i opens for all ngFor and response calls every time. I need to make it dynamic if I call certain component of particular index then only that should be open not for all other componeny. Below is the code for that:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
</div>
Typescript code
Form_Array: any = ["Contact Details", "PAN", "Aadhaar", "Basic", "Address",
"Regulatory Info", "Segments",
"Document Upload", "Brokerage", "Review", "In-person verification"
];
ngOnInit() {
this.getDashboardData();
this.getBranchName();
this.assign123 = new FormGroup({
rmName: new FormControl()
});
this.user = JSON.parse(localStorage.getItem("userDetail"));
console.log(this.user.userName);
localStorage.setItem("userType", this.user.userName);
console.log(localStorage.getItem("userType"));
localStorage.setItem("userDept", this.user.userDept);
console.log(localStorage.getItem("userDept"));
}
getDashboardData() {
const param = { "filter": "", "userid": "3" };
let url = "http://183.182.86.91:8086/user/getSelfAndSubOrdinateApplications";
// let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getSelfAndSubOrdinateApplications"
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.dashboardData = val.data;
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
};
openForm(appId) {
localStorage.removeItem("appId");
this.userDetail = JSON.parse(localStorage.getItem("appId"));
console.log(this.userDetail);
const paramData = {
"ekycApplicationId": appId,
};
this.getData = ;
let urlData = "http://183.182.86.91:8086/review/customerApplicationReview";
this.http.post(urlData, paramData)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.getData = val.data;
console.log(this.getData);
localStorage.setItem("appId", JSON.stringify(this.getData));
// for (var i = 0; i < this.remarks.length; i++) {
// console.log(this.remarks[i].remarkField);
// this.remarkType.push(this.remarks[i].remarkField)
// }
// this.remarkType.push(this.remarks)
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
const param = {
"ekycApplicationId": this.details.ekycApplicationId,
"remarkField": ""
};
let url = "http://183.182.86.91:8086/remarks/getKycApplicationRemarks";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.remarks = val.data;
console.log(this.remarks);
for (var i = 0; i < this.remarks.length; i++) {
console.log(this.remarks[i].remarkField);
this.remarkType.push(this.remarks[i].remarkField)
}
// this.remarkType.push(this.remarks)
console.log(this.remarkType);
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
// });
let data = JSON.parse(localStorage.getItem('appId'));;
{
}
removeStorage(appId) {
localStorage.removeItem("appId");
}
assignment(name) {
alert(this.assign123.value)
console.log(this.userDetail.ekycApplicationId);
const param = {
"eKycApplicationId": parseInt(this.userDetail.ekycApplicationId),
"toUserId": parseInt(this.assign123.value.rmName),
"fromUserId": 3
};
console.log(param);
let url = "http://192.168.0.180:8095/ekycApplication/assignEkycApplication";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
sort(property) {
this.isDesc = !this.isDesc; //change the direction
this.column = property;
this.direction = this.isDesc ? 1 : -1;
};
getBranchName() {
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/ekycApplication/getAllBranchNames";
this.http.get(url)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.branchName123 = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
getRm(name: string) {
alert(name);
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getAllRMByBranch/" + name;
this.http.post(url, null)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.RmName = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
assign(name) {
alert(name);
}
open(content, type) {
console.log(type);
this.name = type;
var i;
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log(this.closeResult);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
Other Image of DB
angular typescript dynamic ngfor
asked Dec 28 '18 at 5:55
kunalkunal
12
|
show 1 more comment
0
I have created a dashboard in which there is ngFor which is printing
inside each *ngFor i have created two components a side nav and main page when we click on side nav link it calls a component by the help of service. On nav click I am passing a message from service and it opens that component. But,the issue is when I am calling component through side nav i opens for all ngFor and response calls every time. I need to make it dynamic if I call certain component of particular index then only that should be open not for all other componeny. Below is the code for that:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
</div>
Typescript code
Form_Array: any = ["Contact Details", "PAN", "Aadhaar", "Basic", "Address",
"Regulatory Info", "Segments",
"Document Upload", "Brokerage", "Review", "In-person verification"
];
ngOnInit() {
this.getDashboardData();
this.getBranchName();
this.assign123 = new FormGroup({
rmName: new FormControl()
});
this.user = JSON.parse(localStorage.getItem("userDetail"));
console.log(this.user.userName);
localStorage.setItem("userType", this.user.userName);
console.log(localStorage.getItem("userType"));
localStorage.setItem("userDept", this.user.userDept);
console.log(localStorage.getItem("userDept"));
}
getDashboardData() {
const param = { "filter": "", "userid": "3" };
let url = "http://183.182.86.91:8086/user/getSelfAndSubOrdinateApplications";
// let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getSelfAndSubOrdinateApplications"
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.dashboardData = val.data;
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
};
openForm(appId) {
localStorage.removeItem("appId");
this.userDetail = JSON.parse(localStorage.getItem("appId"));
console.log(this.userDetail);
const paramData = {
"ekycApplicationId": appId,
};
this.getData = ;
let urlData = "http://183.182.86.91:8086/review/customerApplicationReview";
this.http.post(urlData, paramData)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.getData = val.data;
console.log(this.getData);
localStorage.setItem("appId", JSON.stringify(this.getData));
// for (var i = 0; i < this.remarks.length; i++) {
// console.log(this.remarks[i].remarkField);
// this.remarkType.push(this.remarks[i].remarkField)
// }
// this.remarkType.push(this.remarks)
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
const param = {
"ekycApplicationId": this.details.ekycApplicationId,
"remarkField": ""
};
let url = "http://183.182.86.91:8086/remarks/getKycApplicationRemarks";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.remarks = val.data;
console.log(this.remarks);
for (var i = 0; i < this.remarks.length; i++) {
console.log(this.remarks[i].remarkField);
this.remarkType.push(this.remarks[i].remarkField)
}
// this.remarkType.push(this.remarks)
console.log(this.remarkType);
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
// });
let data = JSON.parse(localStorage.getItem('appId'));;
{
}
removeStorage(appId) {
localStorage.removeItem("appId");
}
assignment(name) {
alert(this.assign123.value)
console.log(this.userDetail.ekycApplicationId);
const param = {
"eKycApplicationId": parseInt(this.userDetail.ekycApplicationId),
"toUserId": parseInt(this.assign123.value.rmName),
"fromUserId": 3
};
console.log(param);
let url = "http://192.168.0.180:8095/ekycApplication/assignEkycApplication";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
sort(property) {
this.isDesc = !this.isDesc; //change the direction
this.column = property;
this.direction = this.isDesc ? 1 : -1;
};
getBranchName() {
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/ekycApplication/getAllBranchNames";
this.http.get(url)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.branchName123 = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
getRm(name: string) {
alert(name);
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getAllRMByBranch/" + name;
this.http.post(url, null)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.RmName = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
assign(name) {
alert(name);
}
open(content, type) {
console.log(type);
this.name = type;
var i;
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log(this.closeResult);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
Other Image of DB
angular typescript dynamic ngfor
asked Dec 28 '18 at 5:55
kunalkunal
12
please provide your ts file also It will be better if you add a slackblitz sample.
– Akhi Akl
Dec 28 '18 at 7:34
there are lots of other component connected and it creates issue in creating stackblitz
– kunal
Dec 28 '18 at 7:36
please provide your typescript code then
– Akhi Akl
Dec 28 '18 at 7:39
Is the problem is when you click verify details it calls for all the elements in ngFor?
– Akhi Akl
Dec 28 '18 at 8:00
Try provide a small slackblitz demo of what you intended to achieve. without whole functions .ie console data instead of service. Can't test what is the problem
– Akhi Akl
Dec 28 '18 at 8:25
|
show 1 more comment
0
0
0
I have created a dashboard in which there is ngFor which is printing
inside each *ngFor i have created two components a side nav and main page when we click on side nav link it calls a component by the help of service. On nav click I am passing a message from service and it opens that component. But,the issue is when I am calling component through side nav i opens for all ngFor and response calls every time. I need to make it dynamic if I call certain component of particular index then only that should be open not for all other componeny. Below is the code for that:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
</div>
Typescript code
Form_Array: any = ["Contact Details", "PAN", "Aadhaar", "Basic", "Address",
"Regulatory Info", "Segments",
"Document Upload", "Brokerage", "Review", "In-person verification"
];
ngOnInit() {
this.getDashboardData();
this.getBranchName();
this.assign123 = new FormGroup({
rmName: new FormControl()
});
this.user = JSON.parse(localStorage.getItem("userDetail"));
console.log(this.user.userName);
localStorage.setItem("userType", this.user.userName);
console.log(localStorage.getItem("userType"));
localStorage.setItem("userDept", this.user.userDept);
console.log(localStorage.getItem("userDept"));
}
getDashboardData() {
const param = { "filter": "", "userid": "3" };
let url = "http://183.182.86.91:8086/user/getSelfAndSubOrdinateApplications";
// let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getSelfAndSubOrdinateApplications"
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.dashboardData = val.data;
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
};
openForm(appId) {
localStorage.removeItem("appId");
this.userDetail = JSON.parse(localStorage.getItem("appId"));
console.log(this.userDetail);
const paramData = {
"ekycApplicationId": appId,
};
this.getData = ;
let urlData = "http://183.182.86.91:8086/review/customerApplicationReview";
this.http.post(urlData, paramData)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.getData = val.data;
console.log(this.getData);
localStorage.setItem("appId", JSON.stringify(this.getData));
// for (var i = 0; i < this.remarks.length; i++) {
// console.log(this.remarks[i].remarkField);
// this.remarkType.push(this.remarks[i].remarkField)
// }
// this.remarkType.push(this.remarks)
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
const param = {
"ekycApplicationId": this.details.ekycApplicationId,
"remarkField": ""
};
let url = "http://183.182.86.91:8086/remarks/getKycApplicationRemarks";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.remarks = val.data;
console.log(this.remarks);
for (var i = 0; i < this.remarks.length; i++) {
console.log(this.remarks[i].remarkField);
this.remarkType.push(this.remarks[i].remarkField)
}
// this.remarkType.push(this.remarks)
console.log(this.remarkType);
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
// });
let data = JSON.parse(localStorage.getItem('appId'));;
{
}
removeStorage(appId) {
localStorage.removeItem("appId");
}
assignment(name) {
alert(this.assign123.value)
console.log(this.userDetail.ekycApplicationId);
const param = {
"eKycApplicationId": parseInt(this.userDetail.ekycApplicationId),
"toUserId": parseInt(this.assign123.value.rmName),
"fromUserId": 3
};
console.log(param);
let url = "http://192.168.0.180:8095/ekycApplication/assignEkycApplication";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
sort(property) {
this.isDesc = !this.isDesc; //change the direction
this.column = property;
this.direction = this.isDesc ? 1 : -1;
};
getBranchName() {
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/ekycApplication/getAllBranchNames";
this.http.get(url)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.branchName123 = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
getRm(name: string) {
alert(name);
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getAllRMByBranch/" + name;
this.http.post(url, null)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.RmName = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
assign(name) {
alert(name);
}
open(content, type) {
console.log(type);
this.name = type;
var i;
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log(this.closeResult);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
Other Image of DB
angular typescript dynamic ngfor
asked Dec 28 '18 at 5:55
kunalkunal
12
I have created a dashboard in which there is ngFor which is printing
inside each *ngFor i have created two components a side nav and main page when we click on side nav link it calls a component by the help of service. On nav click I am passing a message from service and it opens that component. But,the issue is when I am calling component through side nav i opens for all ngFor and response calls every time. I need to make it dynamic if I call certain component of particular index then only that should be open not for all other componeny. Below is the code for that:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
</div>
Typescript code
Form_Array: any = ["Contact Details", "PAN", "Aadhaar", "Basic", "Address",
"Regulatory Info", "Segments",
"Document Upload", "Brokerage", "Review", "In-person verification"
];
ngOnInit() {
this.getDashboardData();
this.getBranchName();
this.assign123 = new FormGroup({
rmName: new FormControl()
});
this.user = JSON.parse(localStorage.getItem("userDetail"));
console.log(this.user.userName);
localStorage.setItem("userType", this.user.userName);
console.log(localStorage.getItem("userType"));
localStorage.setItem("userDept", this.user.userDept);
console.log(localStorage.getItem("userDept"));
}
getDashboardData() {
const param = { "filter": "", "userid": "3" };
let url = "http://183.182.86.91:8086/user/getSelfAndSubOrdinateApplications";
// let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getSelfAndSubOrdinateApplications"
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.dashboardData = val.data;
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
};
openForm(appId) {
localStorage.removeItem("appId");
this.userDetail = JSON.parse(localStorage.getItem("appId"));
console.log(this.userDetail);
const paramData = {
"ekycApplicationId": appId,
};
this.getData = ;
let urlData = "http://183.182.86.91:8086/review/customerApplicationReview";
this.http.post(urlData, paramData)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.getData = val.data;
console.log(this.getData);
localStorage.setItem("appId", JSON.stringify(this.getData));
// for (var i = 0; i < this.remarks.length; i++) {
// console.log(this.remarks[i].remarkField);
// this.remarkType.push(this.remarks[i].remarkField)
// }
// this.remarkType.push(this.remarks)
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
const param = {
"ekycApplicationId": this.details.ekycApplicationId,
"remarkField": ""
};
let url = "http://183.182.86.91:8086/remarks/getKycApplicationRemarks";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.remarks = val.data;
console.log(this.remarks);
for (var i = 0; i < this.remarks.length; i++) {
console.log(this.remarks[i].remarkField);
this.remarkType.push(this.remarks[i].remarkField)
}
// this.remarkType.push(this.remarks)
console.log(this.remarkType);
},
response => {
console.log("POST call in error", response);
},
() => {
console.log("The POST observable is now completed.");
}
)
// });
let data = JSON.parse(localStorage.getItem('appId'));;
{
}
removeStorage(appId) {
localStorage.removeItem("appId");
}
assignment(name) {
alert(this.assign123.value)
console.log(this.userDetail.ekycApplicationId);
const param = {
"eKycApplicationId": parseInt(this.userDetail.ekycApplicationId),
"toUserId": parseInt(this.assign123.value.rmName),
"fromUserId": 3
};
console.log(param);
let url = "http://192.168.0.180:8095/ekycApplication/assignEkycApplication";
this.http.post(url, param)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
sort(property) {
this.isDesc = !this.isDesc; //change the direction
this.column = property;
this.direction = this.isDesc ? 1 : -1;
};
getBranchName() {
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/ekycApplication/getAllBranchNames";
this.http.get(url)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.branchName123 = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
getRm(name: string) {
alert(name);
let url = "http://ec2-13-126-146-219.ap-south-1.compute.amazonaws.com:8080/user/getAllRMByBranch/" + name;
this.http.post(url, null)
.subscribe(
(val: any) => {
console.log("POST call successful value returned in body", val.data);
this.RmName = val.data;
},
response => {
console.log("POST call in error", response);
if (response.status == 420) {
// this.show.changeMessage("Aadhaar");
alert("registered");
}
},
() => {
console.log("The POST observable is now completed.");
}
)
}
assign(name) {
alert(name);
}
open(content, type) {
console.log(type);
this.name = type;
var i;
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
console.log(this.closeResult);
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
}
private getDismissReason(reason: any): string {
if (reason === ModalDismissReasons.ESC) {
return 'by pressing ESC';
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
return 'by clicking on a backdrop';
} else {
return `with: ${reason}`;
}
}
}
Other Image of DB
angular typescript dynamic ngfor
angular typescript dynamic ngfor
asked Dec 28 '18 at 5:55
kunalkunal
12
asked Dec 28 '18 at 5:55
kunalkunal
12
edited Dec 28 '18 at 8:31
kunal
asked Dec 28 '18 at 5:55
kunalkunal
12
asked Dec 28 '18 at 5:55
kunalkunal
12
asked Dec 28 '18 at 5:55
kunalkunal
12
12
please provide your ts file also It will be better if you add a slackblitz sample.
– Akhi Akl
Dec 28 '18 at 7:34
there are lots of other component connected and it creates issue in creating stackblitz
– kunal
Dec 28 '18 at 7:36
please provide your typescript code then
– Akhi Akl
Dec 28 '18 at 7:39
Is the problem is when you click verify details it calls for all the elements in ngFor?
– Akhi Akl
Dec 28 '18 at 8:00
Try provide a small slackblitz demo of what you intended to achieve. without whole functions .ie console data instead of service. Can't test what is the problem
– Akhi Akl
Dec 28 '18 at 8:25
|
show 1 more comment
please provide your ts file also It will be better if you add a slackblitz sample.
– Akhi Akl
Dec 28 '18 at 7:34
there are lots of other component connected and it creates issue in creating stackblitz
– kunal
Dec 28 '18 at 7:36
please provide your typescript code then
– Akhi Akl
Dec 28 '18 at 7:39
Is the problem is when you click verify details it calls for all the elements in ngFor?
– Akhi Akl
Dec 28 '18 at 8:00
Try provide a small slackblitz demo of what you intended to achieve. without whole functions .ie console data instead of service. Can't test what is the problem
– Akhi Akl
Dec 28 '18 at 8:25
please provide your ts file also It will be better if you add a slackblitz sample.
– Akhi Akl
Dec 28 '18 at 7:34
please provide your ts file also It will be better if you add a slackblitz sample.
– Akhi Akl
Dec 28 '18 at 7:34
there are lots of other component connected and it creates issue in creating stackblitz
– kunal
Dec 28 '18 at 7:36
there are lots of other component connected and it creates issue in creating stackblitz
– kunal
Dec 28 '18 at 7:36
please provide your typescript code then
– Akhi Akl
Dec 28 '18 at 7:39
please provide your typescript code then
– Akhi Akl
Dec 28 '18 at 7:39
Is the problem is when you click verify details it calls for all the elements in ngFor?
– Akhi Akl
Dec 28 '18 at 8:00
Is the problem is when you click verify details it calls for all the elements in ngFor?
– Akhi Akl
Dec 28 '18 at 8:00
Try provide a small slackblitz demo of what you intended to achieve. without whole functions .ie console data instead of service. Can't test what is the problem
– Akhi Akl
Dec 28 '18 at 8:25
Try provide a small slackblitz demo of what you intended to achieve. without whole functions .ie console data instead of service. Can't test what is the problem
– Akhi Akl
Dec 28 '18 at 8:25
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
Put your child component related code out side the *ngFor like the following:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53954245%2fangular-6-dashboard-unique-id-in-an-ngfor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Put your child component related code out side the *ngFor like the following:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
add a comment |
0
Put your child component related code out side the *ngFor like the following:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
add a comment |
0
0
0
Put your child component related code out side the *ngFor like the following:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
Put your child component related code out side the *ngFor like the following:
<div class="marg_top">
<div class="bg-white" *ngFor="let data of dashboardData | search : {firstname: searchText,stage: searchText} | orderBy: {property: column, direction: direction};let i = index;">
<div class="container-fluid">
<div class="center-align row">
<div class="col-sm-12">
<div class="block col-sm-2">
{{data.firstname}}{{data.lastname}}
</div>
<div class="block_l col-sm-3">
<span class="light_small">68%</span>
{{data.stage}}
</div>
<div class="block_l col-sm-1">
Customer
</div>
<div class="block_l col-sm-1">
<img src="assets/images/call.png">
</div>
<div class="block_l col-sm-1">
<img src="assets/images/mail.png">
</div>
<div class="block_l col-sm-2">
<span class="status_color"><b>.</b></span>
Paused
</div>
<div class="block_l col-sm-2 row center-align" [hidden]="!data.openLayout">
<span class="margin_20">
<img src="assets/images/add_rm.png" (click)="open(content,data.firstname)">
</span>
<span class="margin_20">
<img src="assets/images/expand.png">
</span>
<span class="margin_20" (click)="data.openLayout=false;removeStorage(data.ekycApplicationId)">
<img src="assets/images/cancel.png">
</span>
</div>
<div class="block_l col-sm-2">
<a class="btn button_css" [hidden]="data.openLayout" (click)="data.openLayout=true;openForm(data.ekycApplicationId)">verify
Details</a>
</div>
</div>
</div>
</div>
</div>
<div class="bg-loader" [hidden]="data.openLayout"></div>
<div class="container" [hidden]="!data.openLayout">
<div class="row">
<app-form-layout></app-form-layout>
<app-form-desc></app-form-desc>
</div>
</div>
</div>
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
answered Dec 28 '18 at 8:26
SyedurSyedur
18418
18418
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
add a comment |
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
I above code If I apply click on view details than how [hidden]="!data.openLayout" work? It works on when it should be on ngFor
– kunal
Dec 28 '18 at 9:22
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53954245%2fangular-6-dashboard-unique-id-in-an-ngfor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
please provide your ts file also It will be better if you add a slackblitz sample.
– Akhi Akl
Dec 28 '18 at 7:34
there are lots of other component connected and it creates issue in creating stackblitz
– kunal
Dec 28 '18 at 7:36
please provide your typescript code then
– Akhi Akl
Dec 28 '18 at 7:39
Is the problem is when you click verify details it calls for all the elements in ngFor?
– Akhi Akl
Dec 28 '18 at 8:00
Try provide a small slackblitz demo of what you intended to achieve. without whole functions .ie console data instead of service. Can't test what is the problem
– Akhi Akl
Dec 28 '18 at 8:25