binding childcomponent variable with dropdown in parent component Angular 4

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

where is the definition of this.notify? I mean where do you declare it, and where do you subscribe on it? — mvermand
– mvermand, Commented Feb 15, 2018 at 7:17
@Output() notify: EventEmitter<string> = new EventEmitter<string>(); — knowledge20
– knowledge20, Commented Feb 15, 2018 at 7:18
I had added this in session.ts. However, missed here in code — knowledge20
– knowledge20, Commented Feb 15, 2018 at 7:19
You added the this.notify.emit in the 'finally' of your insertNewSession observable. Is it called correctly? Can you add some logging there? — mvermand
– mvermand, Commented Feb 15, 2018 at 7:21

Darsan S Kumar · Accepted Answer · 2018-02-15 07:29:38Z

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

answered Feb 15, 2018 at 7:29

Darsan S Kumar

3013 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

knowledge20 Over a year ago

hey thanks..I am being redirected to correct UI(code for Session) based on this. But the dropdown index is not getting changed to Session.

knowledge20 Over a year ago

my dropdown hasbelow code dms =['Select','Session','Webinar'];

Darsan S Kumar Over a year ago

Collectives™ on Stack Overflow

binding childcomponent variable with dropdown in parent component Angular 4

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related