0

app.module.ts

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule,MyDatePickerModule ],
 declarations: [ AppComponent,HeaderComponent,
              ContentComponent,ActionComponent ,
              FacultyComponent,StudentComponent,
              filterPipe
            ],                
  providers:    [ DataService ], 
  bootstrap:    [ AppComponent ]
 })
  export class AppModule { }

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: `./app/app.components.html`,
})
export class AppComponent  { }

app.components.html

     <my-header></my-header>
     <my-content></my-content>

header.components.ts

@Component({
   selector: 'my-header',
  templateUrl: `./app/header/header.components.html`
 })
 export class HeaderComponent  {
   batchObj: Task;
   myDatePickerOptions: any;  
   constructor(private dataService: DataService) { }   
}

header.components.html

      Batch : <select  [(ngModel)]="sel_batch"  > <option >Select Batch</option>
                   <option *ngFor="let item of  batchObj | filterPipe: [];   ">{{item.batch}}</option>
            </select>
    Term : <select  [(ngModel)]="sel_term"> <option>Select Term</option>
     <option *ngFor="let item of batchObj | filterPipe: ['batch', sel_batch,'term'];   ">{{item.term}}</option>
     </select>           
    Section : <select  [(ngModel)]="sel_section"> <option>Select Section</option> 
     <option *ngFor="let item of batchObj | filterPipe: ['batch', sel_batch,'term',sel_term,'section'];">{{item.section}}</option>
    </select>

content.components.ts

@Component({
 selector: 'my-content',
 templateUrl: `./app/content/content.components.html`    
 })
  export class ContentComponent  { 
 }

this my-header my-content both custom tag present in my master app.component.ts file

so I want to pass three select box value from my-header to my-content page

1) how to do it?

2) I used three select box each one select box value comes when calling previous for that i used ng-model for passing value but i saw some example where passing value from one component to another use like #sel_batch instead of [(ngModel)]="sel_batch" but then filterPipe: ['batch', sel_batch,'term'] not work which syntax correct for my condition

User
  • 1,334
  • 5
  • 29
  • 61

1 Answers1

2

You have to create one common service which shared between your HeaderComponent and ContentComponent and with this service you can communicate between HeaderComponent and ContentComponent. Check Component communication via a service documentation and my answer for parent-child or sibling component comunication.

After you have made common service you have to emit the events from HeaderComponent on select dropdown value change which needs to be already subscribe by ContentComponent so that you can perform your functionality based on dropdown value change

Community
  • 1
  • 1
ranakrunal9
  • 13,320
  • 3
  • 42
  • 43
  • {option: 'call_child', value: 'From child'} what this part does? how to pass my select batch here – User Jan 05 '17 at 05:19
  • In `notifyOther` you are passing `{option: 'call_child', value: 'From child'}` which you will receive as `res` inside `subscribe` inside `ContentComponent`. So you can pass your value which you want to send to `ContentComponent` from `notifyOther`. – ranakrunal9 Jan 05 '17 at 05:26
  • pls example consider this **[(ngModel)]="sel_batch"** select box how to pass in above – User Jan 05 '17 at 05:28
  • 1
    Try to check by passing `{option: 'batch_changed', value: this.sel_batch}` for batch and `{option: 'term_changed', value: this.sel_term}` for term value change and inside your `subscribe` compare value of `res.option` with `term_changed` or `batch_changed` instead of `call_child` to perform your action. – ranakrunal9 Jan 05 '17 at 05:30
  • ok i will try hope this will work me one more question most video use directive for that but its showing deprecated. any other alternative for that – User Jan 05 '17 at 05:39