Components: in md-select how do you use panelOpen and selected

Created on 8 Mar 2017 · 16Comments · Source: angular/components

Question:

In md-select how are panelOpen and selected used? Are they inputs outputs or [()]?

What is the expected behavior?

I am trying to get something selected without using ngModel

What is the current behavior?

N/A

What are the steps to reproduce?

n/a
Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

n/a

Which versions of Angular, Material, OS, browsers are affected?

2.4.8

Is there anything else we should know?

n/a

Source

xtianus79

All 16 comments

Both of those properties are readonly. If you want to manipulate the selected value, you can do so using ngModel, a FormControl or passing a value to the writeValue method. As for opening and closing the select programmatically, you can use the open, close or toggle methods.

crisbeto on 12 Mar 2017

@crisbeto thanks for the reply. When you say read only can you give an example of using this. I think a lot of people get confused about this and there is no documentation that explains this or shows examples.

Also, when you say "writeValue method" do you mean using the control value accessor and its properties i.e. writeValue?

xtianus79 on 13 Mar 2017

The select has the writeValue method regardless of whether it has a value accessor. You can pass it a value and it should select the corresponding option.

crisbeto on 13 Mar 2017

@crisbeto but using select where exactly? in the component? does this become active when using the md-select and applying an attribute. Can you show just a simple example of this.

xtianus79 on 16 Mar 2017

If you have a component that looks like this:

@Component({
  template: `
    <md-select #select="mdSelect"></md-select>
  `
})
export class YourComponent() {
  @ViewChild('select') private select: MdSelect;
}

You can use this.select to call methods on MdSelect programmatically.

crisbeto on 16 Mar 2017

awesome! this should be included in the documentation because it's not really clear.

Is it that @ViewChild is using a function from MdSelect? Is this why viewchild is needed?

xtianus79 on 16 Mar 2017

👍1

ViewChild allows you to get a reference to a component's API. It's a part of the Angular core: https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

crisbeto on 16 Mar 2017

😄1

Thank you... so this is what I came up with

analyse() { if (this.select.selected.value !== undefined) { console.log('this.select = ' + this.select.selected.value.valueChoice); } console.log('this.panelOpen = ' + this.select.panelOpen); }

select="mdSelect" (onClose)="analyse()" (onOpen)="analyse()"

I used onClose and onOpen respectively for selected and panelOpen....

Again, I think documentation examples would be helpful. I would post them if there was way to do so in the documentation.

xtianus79 on 16 Mar 2017

@crisbeto also, just to ask.. what is the difference in your words of using ViewChild vs the current components constructor?

xtianus79 on 16 Mar 2017

Not exactly sure what you mean. Are you asking about injecting MdSelect in your constructor?

crisbeto on 16 Mar 2017

@crisbeto ok, I setup a helper file that has functions that are reusable throughout my application hence the title helper file. I usually bring them through to the constructor... they don't really depend on the dom...

the example of ViewChild you showed me in the documentation that uses AfterViewInit & later uses 'set' ... then uses the DOM for identification??? When then allows for the reference to be set to the components api... i.e. only for that specified dom element???

this is from the angular 2 documentation...
You can use ViewChild to get the first element or the directive matching the selector from the view DOM. If the view DOM changes, and a new child matches the selector, the property will be updated.

As it seems everything is dependent on the dom initializing so that the api can be accessed. Again in the example you showed me they do one afterInit and one with a 'set' init.
Another example is showed here again... The first explanation again says the view has to be initialized prior to api access. Later they add a local variable that seems not to have to initialized. in your mdSelect example I think this is what you showed me.
http://learnangular2.com/viewChild/

Is this the key difference between just accessing the class through a constructor and using ViewChild? Just wondering if this is a preferred way or less resources on the application to do it this way then just simple raw direct component access?

Thanks.

xtianus79 on 16 Mar 2017

The two ways have different use cases:

When you're passing something through the constructor, you're using dependency injection to instantiate it. You use this for services, parent components etc.
ViewChild is used when you want to find a child component in the DOM. For this to happen, the view has to have been initialized.

Hopefully this clears it up.

crisbeto on 16 Mar 2017

👍1

@crisbeto thanks sir. This is what I was thinking but that statement really clears this up.

xtianus79 on 17 Mar 2017

@crisbeto also, one more question is there a way to add user comments or update documentation to help others? the material docs are a little basic. or do you guys take pull requests.

xtianus79 on 17 Mar 2017

You're always welcome to put in a PR. You can also check out our contributing guide: https://github.com/angular/material2/blob/master/CONTRIBUTING.md

crisbeto on 17 Mar 2017

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}