How to select particular field in Angular 6 - html

Question

enter image description here
html code
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header" style="text-align: center;">
<span class="close">×</span>
<h2>Register Account</h2>
</div>
<div class="modal-body">
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
Employer
</div>
<div class="su-body" style="background-color:#3B5998;">
Candidate
</div>
</div>
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
Login with Faceboo
</div>
<div class="su-body" style="background-color:#3B5998;">
Login With Google
</div>
</div>
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
Login With Linkedin
</div>
<div class="su-body" style="background-color:#3B5998;">
Login With Twitter
</div>
</div>
</div>
<div class="modal-footer">
<div class="signup-body">
<!-- <button>Sign up</button> -->
<div class="su-body" style="background-color:#3B5998;">
Sign up
</div>
</div>
<p>Already have ab account</p>Login
</div>
</div>
</div>
I want to create a registration page has given below in angular 6. But my question is when user can register two ways (either employer or candidate ) so how can i send Api particular field data. please help me.

Answer 1

Please check below solution might be it can help you to observe Registration Type:
Registered Event in Html:
<div class="signup-body">
<div class="su-body" style="background-color:#3B5998;">
<a href="#" target="_blank" (onclick)="changeReg('Employer')" >Employer</a>
</div>
<div class="su-body" style="background-color:#3B5998;">
<a href="#" target="_blank" (onclick)="changeReg('Candidate')" >Candidate</a>
</div>
</div>
Create a data sharing service
import { Injectable } from '#angular/core';
import { BehaviorSubject } from 'rxjs';
#Injectable()
export class DataService {
private regSource = new BehaviorSubject('Employer'); //Default registration type
currentReg = this.regSource.asObservable();
constructor() { }
changeRegType(regTyp: string) {
this.regSource.next(regTyp)
}
}
Set New Registration type within Supplied Html component:
import { Component, OnInit } from '#angular/core';
import { DataService } from "../data.service";
#Component({
selector: 'app-registration',
styleUrls: ['./registration-selection.component.css']
})
export class RegistrationSelectionComponent implements OnInit {
constructor(private data: DataService) { }
changeReg(regType:String) {
this.data.changeRegType(regType);
}
}
Get default/new registration type in signup component:
import { Component, OnInit } from '#angular/core';
import { DataService } from "../data.service";
#Component({
selector: 'app-signup',
template: `
{{message}}
`,
styleUrls: ['./signup.component.css']
})
export class SignUpCmponent implements OnInit {
regType:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentReg.subscribe(reg => this.regType = reg)
}
}