CODEWITHSUNDEEP
angulartypescriptdropdownprimeng
RobinLu
RobinLu

Reputation: 17

Angular 4 primeng onChange is not working

Currently I'm implementing a search method to search from two dropdown column. We selecting the first column and then selecting the second column. We have 2 silos and 4 shops, selecting the first silo then it will show 2 shops which siloId is 1 and selecting the second silo will show the rest 2 shops with siloId 2. However, no matter how do I modify the onChange($event), the (onChange)="onChange($event.value) seems never work.

Here is my .ts code

 /*Here is my .ts code*/<br> constructor(
      private router: Router ) {
       this.silos = [
        {label: 'North ASSEMBLY SILO', value:{Id: '1'}},
        {label: 'South ASSEMBLY SILO', value:{Id: '2'}},
        ];           
       this.shops = [          
        {label: 'Assembly N', value:{siloId: '1', Id: '1'}},
        {label: 'Assembly NN', value:{siloId: '1', Id: '2'}},
        {label: 'Assembly S', value:{siloId: '2', Id: '3'}},
        {label: 'Assembly SS', value:{siloId: '2', Id: '4'}},
        ];
                 }
        onChange($event){
          if(event) {
             // No matter what I do, this seems doesn't work....
        }
    }

And this is my .html code

        <div class="ui-grid-col-3" >   
        <b>DROP DOWN TO SELECT SILOS</b>
        <p-dropdown [options]="silos" [(ngModel)]="selcetedShop" [style]="{'width':'100%'}" filter = "true" (onChange)="onChange($event)">
        </p-dropdown>
    </div>
    <div class="ui-grid-col-3" >    
        <b>DROP DOWN TO SELECT SHOPS</b>
        <p-dropdown [options]="shops" [(ngModel)]="selectedSilo" [style]="{'width':'100%'}" filter ="true">
        </p-dropdown>
    </div>

Upvotes: 1

Views: 11930

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

You need to use (ngModelChange)

 <p-dropdown [options]="silos" [(ngModel)]="selcetedShop" [style]="{'width':'100%'}" filter = "true" (ngModelChange)="onChange(selcetedShop)" >

Upvotes: 4

Related Questions