Programatically open or close 'expander' component i

Hi  jpetersen,

You can do this by modifyng the expanders config.expanded value like this:

myExpander.config.expanded = true;

You need to annotate your expander as a @ViewChild first to access it.

Hope this helps,

George.

Thanks, George. I probably should have added to my post that I'm still relatively new at this.

Could you please 'expand' on the part about annotating the expander as a @ViewChild? I'm not familiar with that.

Hi,

@ViewChild is an Angular anotation that allows you to access elements from your .html template from your component. You can find details on how this happens here angular.io/.../ViewChild .

Bellow is a snipet on how you can realise what (I think) you want.

myview.html :

<kb-expander [tag:myExpander] [config]="$config.components.myExpander" [id]="'myExpander"></kb-expander>

<button type="button" class="k-button k-primary" (click)="expand()" >

                                               expand

                                           </button>

myview.ts :

export class myview extends myviewBaseComponent {

 @ViewChild("myExpander") public myExpander: KbExpanderComponent;

 public expand(){

       this.myExpander.config.expanded = !this.myExpander.config.expanded;

    }

}

Explanation :

I have an expander in the template and a button that executes the expand function on the click event.

In the myview.ts I added a ViewChild annotation for the expander. Be careful the  @ViewChild("myExpander") refres to the [tag:myExpander] value  in the template.

After this I can access the expander component and its methods / atributes anywhere in myview.ts.

In the expand method I changed the value of config.expanded to the oposite of what it was before.

This should result in the "exapand" button "programaticly" expanding and closing the expander.

I hope this is clear. Be carefull the code above might have typos in it as I did not test it.

George.