Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 data will have the existing profile data for the employee..
  
  })
  
  
   this._Profileservice.GetRoleCatagoryList().subscribe(res=>{
    this.roleCatagoryList=res;
	/////This data is binded to the dropdownlist..
  })
  
  }
  
  
  }
  
  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}]
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900