this component does the editing as well as displaying the employee profile. as demo, below I have given one field control.
In Edit mode: Dropdown gets the master list. already existing employee data should be binded to dropdown while editing.
In View mode: Employees updated profile data/fetched data should be displayed.
How to achive this without creating performance issue...
<div *ngIf="empProfile">
<div>
<label *ngIf="!modify" for="Rolecategory">Role category</label>
<span id="Rolecategory" *ngIf="!modify" [ngClass]="selectedoption.length > 1 ? 'hover-blue':''" [mdePopoverTriggerFor]="categorypopover" mdePopoverTriggerOn="hover">
{{NEED TO BIND THE EMPLOYEE ROLE HERE}}
<span *ngIf="selectedoption.length > 1 ">(+{{selectedoption.length -1}})</span>
</span>
<mde-popover #categorypopover="mdePopover">
<div *ngIf="selectedoption.length > 1 ">
<ul>
<li *ngFor="let list of selectedoption">{{list}}</li>
</ul>
</div>
</mde-popover> <span id="Rolecategory" *ngIf="modify">
<mat-form-field>
<mat-label>Role category</mat-label>
<span *ngIf="selectedoption.length > 1 "
class="number">(+{{selectedoption.length -1}})</span>
<mat-select [(ngModel)]="selectedoption" multiple disableOptionCentering panelClass="panelhead" class="multi-select">
<mat-option *ngFor="let role of roleCatagoryList" [value]="role.RoleCatagory_Id">{{role.RoleCatagory_Name}}</mat-option>
</mat-select>
</mat-form-field>
</span>
</div>
</div>
ts file
export class ProfileComponent implements OnInit {
empProfile : IEmpProfile----this has number of fields..
roleCatagoryList;
modify = false--- on click modify button this get change to true.
selectedoption : any;
ngOnInit(): void {
this._Profileservice.getFullProfile(empNo)
.subscribe(data=>
{
this.empProfile=data;
})
this._Profileservice.GetRoleCatagoryList().subscribe(res=>{
this.roleCatagoryList=res;
})
}
}
Updatetheprofile(empProfile){
this._EmpProfile.modifyEmpProfile(empProfile).subscribe(({
next: data=>{
this.empProfile=empProfile;
},
error: error => {
console.error('There was an error with posting profile!', error);
}
})
What I have tried:
I used the ngmodel concept but the issue is my api gives the data as id..
example:
empProfile.role_catagory = [1,4,5]
roleCatagoryList =[{id=1,name=role1},{id=2,name=role2},{id=3,name=role3},{id=4,name=role4}]