binding childcomponent variable with dropdown in parent component Angular 4 - html

Question

I am new to Angular 4 and using MEAN stack to develop an application.
My parent component is admin and child is session. I am trying to set the dropdown value in the parent component based on child component value.I am output emitter event for the same in the insert session method. However I am unable to set the value of dropdown. Pls help.
admin html
<div>
<label for="FormType" class="col-sm-2 col-form-label">Select Type </label>
<select #s (change)="setNav(s.value)">
<option *ngFor="let item of dms" >{{item}}</option>
</select>
</div>
<div *ngIf="regTypeSelectedOption==='Session'">
<code for session></div>
<div *ngIf="regTypeSelectedOption==='webinar'">
<code for webinar>
</div>
<div (notify)='onNotify($event)'></div
admin.ts
onNotify(message: string):void{
this.setNav(message);
alert(JSON.stringify(message));
}
setNav(nav:any){
this.selectedNav = nav;
if(this.selectedNav == "Session"){
this.regTypeSelectedOption = "Session";}
else if(this.selectedNav == "Webinar"){
this.regTypeSelectedOption = "Webinar";
}
else if (this.selectedNav == "Select"){
this.regTypeSelectedOption = "Select";
}
}
session.ts
export class SessionComponent implements OnInit {
insertSession(sessionForm){
this.newSession.deliveryMethod = this.regTypeSelectedOption;
this.newSession.formType = "Session";
let updatedresult;
if(this.updatedid == undefined){
this.dataService.insertNewSession(this.newSession)
.subscribe(
res =>{ this.sessions = res;
console.log('response', res)},
err => this.apiError = err,
() => {
this.notify.emit('Session');
this.router.navigate(['/admin']);
}
)
I am using notify event in parent with div. If I use the notify event with selector of sessioncomponent entire session component is getting displayed

Answer 1

I think you want to send message from one component to another, without using the child component in parent component.
I had a look at your code and found you are navigating to '/admin', after selection.
I would rather recommend you to register a route in your app.routing.ts like below
{path:'/admin/:id',component:AdminComponent}
In the Admincomponent use the below code to fetch the data from the route.
import {Router, NavigationEnd, ActivatedRoute,Params } from "#angular/router";
In Admincomponent implement OnInit and add below code to read the route value
ngOnInit(){
this.activatedRoute.params.subscribe((params: Params) => {
this.params = this.activatedRoute.params;
this.regTypeSelectedOption= this.params.value.id != undefined ? this.params.value.id : "";
});
}
Now in the ChildComponent , replace the below code:
//this.notify.emit('Session');
this.router.navigate(['/admin/Session']);
Now when the session is inserted, it will route you back to the AdminComponent with Session Id