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-09T04:44:32.473

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 09 '18 at 04:44

answered Jan 09 '18 at 04:30

Iaroslav

295
1
10

Thanks. i am aware of basics. I started getting error near expanded = !expanded; cannot find name expanded did you mean instance member this.expanded? – Giridhar Joshi Jan 09 '18 at 04:43
You need to declare it in component: expanded = false; – Iaroslav Jan 09 '18 at 04:44
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. – Iaroslav Jan 09 '18 at 04:45
Thank you. I edited my code above same as i have in my pages. I am not getting anything in my page. – Giridhar Joshi Jan 09 '18 at 04:52
Could you please insert Angular component code to your question? Also I've mentioned that your HTML is not the same as in https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option – Iaroslav Jan 09 '18 at 04:53
Issue with cache. I fixed it. Thanks. If i want to bind values to checkboxes from api then i should write my code in showCheckboxes function right? – Giridhar Joshi Jan 09 '18 at 04:57
If you mean you want to display content from api to id="checkboxes" then you need to use *ngFor and an array. showChexboxes() should have logic only for showing/hiding checkboxes and nothing more. If you want to add an extra logic when to show or hide them then yes you can write it back to your component. – Iaroslav Jan 09 '18 at 05:00
You're welcome. I would suggest to read this article about using http, maybe it will help you: https://www.barbarianmeetscoding.com/blog/2016/04/02/getting-started-with-angular-2-step-by-step-6-consuming-real-data-with-http/ – Iaroslav Jan 09 '18 at 05:04

angular2 multi select checkbox

1 Answers1