angular2 multi select checkbox

Question

Hi I am new to angular2 and type script. I am trying to develop multiselect dropdown in angularjs2. I have my plain html as below. I refered How to use Checkbox inside Select Option from stackoverflow.

   <div class="selectBox" (click)="showCheckboxes()">
                            </div>

                            <div id="checkboxes" [style.display]="expanded ? 'block' : 'none'">
                                <label for="one">
                                    <input type="checkbox" id="one" />First checkbox
                                </label>
                                <label for="two">
                                    <input type="checkbox" id="two" />Second checkbox
                                </label>
                                <label for="three">
                                    <input type="checkbox" id="three" />Third checkbox
                                </label>
                            </div>

in component i have

 showCheckboxes() {
     expanded =expanded;
    }

also i declared expanded = false; in component. function showCheckboxes is written in js. I am trying to write same thing in type script. Can someone help me to make it work on angular2?

Iaroslav · Accepted Answer · 2018-01-09 04:44:32Z

1

I'm assuming that you're aware of Angular basics such as components.

So the method in your component should look like:

expanded = false;
showCheckboxes() {
  expanded = !expanded;
}

Your HTML:

<div class="selectBox" (click)="showCheckboxes()">
   ....
</div>

<div id="checkboxes" [style.display]="expanded ? 'block' : 'none'">
   ....
</div>

Or you can even remove method and move code to HTML:

<div class="selectBox" (click)="expanded=!expanded;">

And in your component you will left only:

expanded = false;

edited Jan 9, 2018 at 4:44

answered Jan 9, 2018 at 4:30

Iaroslav

2951 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Giridhar Joshi Over a year ago

Thanks. i am aware of basics. I started getting error near expanded = !expanded; cannot find name expanded did you mean instance member this.expanded?

Iaroslav Over a year ago

You need to declare it in component: expanded = false;

Iaroslav Over a year ago

I've added explanation to my answer. You will move code of function showCheckbox to HTML but the variable expanded you need to declare anyway.

Giridhar Joshi Over a year ago

Thank you. I edited my code above same as i have in my pages. I am not getting anything in my page.

Iaroslav Over a year ago

Could you please insert Angular component code to your question? Also I've mentioned that your HTML is not the same as in stackoverflow.com/questions/17714705/…

|

Collectives™ on Stack Overflow

angular2 multi select checkbox

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related