0

Here is my emp array of object:

emp[
    {"id":1001,"name":"robin_delhi"},
    {"id":1002,"name":"robin_mumbai"},
    {"id":1003,"name":"robin_bang"},
    {"id":1004,"name":"sushil_delhi"},
    {"id":1005,"name":"sushil_mumbai"},
]

Here is my HTML template, I am displaying emp object in drop down through mat select component of angular material:

<mat-form-field>
    <mat-select [(ngModel)]="emp" [(value)]="sel" placeholder="Employee
        [formControl]="toppings" multiple required>
        <mat-option  *ngFor="let p of emp | proDisable:emp:sel; let p = index;" [value]="p">
            {{p.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

I want when particular emp name will selected, it will match with remaining element (first part of special character “_”), if match found it will show as usual else disabled.

Here is my custom pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'proDisable'
})

export class ProDisablePipe implements PipeTransform {    
    transform(value:any, data:any, sel:any) : any {
        if(!sel)
        {
            return value;
        }
        else
        {
            let nval:any;

            for(var i=0; i<data.length; i++) 
            {
                for(var j=0; j<sel.length; j++)
                {
                    if ((i['name'].substring(0, i['name'].indexOf("_")))==(sel['name'].substring(0, sel['name'].indexOf("_"))))
                    {
                        nval= "class='disable'"+value;
                    }
                    else 
                    {
                        nval= "class='enable'"+value;
                    }
                } 
            }

            return nval;
        }
    }
}

Here if I select first element, the last two will be disabled.

Kindly help how to achieve this or any better way to do this.

3
  • So what you want to achieve is: When I click on "robin_delhi", all other options that do not contain the first name "robin", will be disabled. Right?
    – user6749601
    Jun 7, 2018 at 9:33
  • Exactly, when I click on "robin_delhi", all other options that do not contain the first name "robin", will be disabled
    – mjck
    Jun 7, 2018 at 9:36
  • Kindly help me how to achieve this or any better way to do this
    – mjck
    Jun 7, 2018 at 9:54

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.