Angular Material Select - How to set value programatically?

Question

I have a form with a select input as a component - so the form component holds children components for each field type (text, select, textarea, etc.). I want to be able to load data and display it in the form . The problem is with the material-select, i can't set value , i've read about using [compareWith] directive - but i don't know how to trigger it. To simulate sending the data to the i've created a button that changes the @Input value in the Select Component and by that - triggers the [compareWith] - but i guess it's not the solution.

Here is the main component structure :

 <form [formGroup]="contactForm" >
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Full Name </mat-label>
      <input matInput placeholder="Full Name" value="" formControlName="fullName">
    </mat-form-field>
  <br>
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Email </mat-label>
      <input type = "email" matInput placeholder="Email" value="" formControlName="email">
    </mat-form-field>
    <br>
    // select component *
    <select-multiple-example [formObj]="contactForm" [selectedValue]="selectedVal">
    </select-multiple-example>
  </form>
  
<button mat-raised-button color="primary" (click)="setSelectValue()">set value</button>

I'm adding 2 examples for better understanding of the issue:

The first is my attempt to trigger the select-multiple-example and set a value from it's input
The second is a working example of setting a value ad a standalone component

Example of the problem

Example of the selection working as an independent component

Ah do you mean, that if I uncheck "second", the button "set value" should check "second"? — Ali Demirci
– Ali Demirci, Commented Nov 23, 2021 at 17:09
I'll elaborate - the "set value" button is suppose to set value to the "select program" dropdown, which is a child component, the value that's being set from the button function is "second", so the working scenario will be that once you'll click "set value" - > the dropdown will show "second" — RoyBarOn
– RoyBarOn, Commented Nov 23, 2021 at 18:14

Ali Demirci · Accepted Answer · 2021-11-23 19:14:50Z

Oh ok, basically you want to trigger an event on child component whenever an input value changes on parent.

First of all you should get a reference of your child component from your parent to access it within code with ViewChild(ren), then if you click on button, you should trigger an event, or a function that changes the value inside the child component.

But, this can also be achieved with the examples you provided using ngOnChanges.

The first problem here is that you're trying to access an input value inside constructor. You can't do that. constructors are typescript things, @Inputs are Angular things. Your input variable will be available on ngOnInit.

So, move formObj assignation to ngOnInit

  ngOnInit() {
    this.myprgrmFormControl = this.formObj
  }

Then, you can access changed variable inside ngOnChanges

  ngOnChanges(changes: SimpleChanges) {
    this.myprgrmFormControl.get('program').setValue([changes.selectedValue.currentValue])
  }

Thanks - i've updated the example - but i didn't used ViewChild(ren), i've passed the form object in the @input

mike · Accepted Answer · 2021-11-23 17:00:30Z

0

If I understood your question correctly, you want to check out the ngOnChanges() lifecycle function (onInit, onDestroy, onChange, etc...). This way you will be able to see the changes in the parent component and react on it. Let me know if I understood well your issue!

answered Nov 23, 2021 at 17:00

mike

1,8792 gold badges16 silver badges31 bronze badges

1 Comment

RoyBarOn Over a year ago

Thanks for the quick replay - i'll elaborate - i want to checkout any function lifecycle function that will trigger the event that "refresh" the dropdown, so , once the "set value" will pressed - it will "emit" the new value from the parent component to the child (select-multiple-example) - i'm not sure i've implemented the right solution.... if you'll look in the second example - you'll see the behaviour i'm looking for - only as a child component.

Collectives™ on Stack Overflow

Angular Material Select - How to set value programatically?

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related