Checkbox Angular

Question

I'm using angular and I'm not sure if problem is with it. So I have a checkbox, and when I click on it, it works, but when I need to choose another object and I need to click on it. It appears it (checkbox) has previous state. I need that if I choose another element to click on. It has default state (which is untick (false)).

.ts

show = false

toggleContract() {
   this.show = !this.show
}

.html

<p-checkbox  (click)='toggleContract()' [ngModel]="show"></p-checkbox>
<ng-container *ngIf="show"><ng-container />

You can use [(ngModel)] for two way binding. You don't actually need the function since you bound the show variable to your checkbox — firatozcevahir
– firatozcevahir, Commented Jun 18, 2021 at 9:22
Just remove the function and (click) event handler from your checkbox — firatozcevahir
– firatozcevahir, Commented Jun 18, 2021 at 9:29
Sorry I read before it was eddied. Well I tried. I must also say that this checkbox affect if one div is shown or not, if I do like you said. The behavior stays the same/, and div appears once and stays shown no matter how many times I clicked — Корвин Кори
– Корвин Кори, Commented Jun 18, 2021 at 9:36

tmsbrndz · Accepted Answer · 2021-06-18 09:08:23Z

1

Did you try to add ngModelOptions="{standalone: true}" to your checkbox?

answered Jun 18, 2021 at 9:08

tmsbrndz

1,3472 gold badges9 silver badges23 bronze badges

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

3 Comments

Корвин Кори Over a year ago

Tried the same result, it should look like that ? <p-checkbox (click)='toggleContract()'[ngModel]="show" ngModelOptions="{standalone: true}"></p-checkbox>

tmsbrndz Over a year ago

yea but you need to use two-way binding like this [(ngModel)].

tmsbrndz Over a year ago

Show full code related to problem, on stackblitz e.g.

firatozcevahir · Accepted Answer · 2021-06-18 09:33:16Z

1

You can use two way binding [(ngModel)] then you don't need to handle the event. Angular does itself.

HTML:

<p-checkbox  [(ngModel)]="show"></p-checkbox>
<ng-container *ngIf="show"><ng-container />

Typescript:

show = false

answered Jun 18, 2021 at 9:33

firatozcevahir

9025 silver badges13 bronze badges

Comments

Sam · Accepted Answer · 2021-06-18 10:46:12Z

1

Assuming you are using PrimeNG - assumption made from p-checkbox

For some reason it looks like primeNG has multiple values set as a default & is therefore expecting an array. Apparently you can pass [binary]="true" to override this functionality and bind directly to a single boolean.

<p-checkbox [(ngModel)]="show" [binary]="true"></p-checkbox>

answered Jun 18, 2021 at 10:46

Sam

1,87111 silver badges19 bronze badges

Comments

rdh · Accepted Answer · 2024-08-16 05:58:38Z

<section class="content">
    <ul class="list">
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox" checked>
            Item 1
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 2
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 3
      </label>
    </li>
    <li class="list__item">
      <label class="label--checkbox">
          <input type="checkbox" class="checkbox">
            Item 4
      </label>
    </li>
  </ul>
</section>

@import "bourbon";

$baseFontSize: 16;

$green: #009688;
$blue: #5677fc;
$blueDark: #3b50ce;

$slideDistance: 100;
$slideDuration: .4s;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}

body {
  font-size: #{$baseFontSize}px;
}

.header {
  height: 8rem;
  
  background:  $green;
}

.content {
  @extend %slide-up;
  
  width: 20rem;
  margin: -4rem auto 0 auto;
  padding: 1rem;
  
  background: #fff;
  
  border-radius: rem(2);
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
}

.list {
  margin: .5rem;  
}

.list__item {
  margin: 0 0 .5rem 0;
  padding: 0;
}

.label--checkbox {
  position: relative;

  margin: .5rem;
  
  font-family: Arial, sans-serif;
  line-height: 135%;
  
  cursor: pointer;
}

.checkbox {
  position: relative;
  top: rem(-6);
  
  margin: 0 1rem 0 0 ;
  
  cursor: pointer;
  
  &:before {
        @include transition(all .3s ease-in-out);
    
        content: "";
    
        position: absolute;
        left: 0;
        z-index: 1;
  
        width: 1rem;
        height: 1rem;
    
        border: 2px solid #f2f2f2; 
  }
  
  &:checked {
    &:before {
       @include transform(rotate(-45deg));
  
        height: .5rem;
  
        border-color: $green;
        border-top-style: none;
        border-right-style: none;
    } 
  }
  
  &:after {
    content: "";
    
    position: absolute;
    top: rem(-2);
    left: 0;
    
    width: 1.1rem;
    height: 1.1rem;
    
    background: #fff;
    
    cursor: pointer;
  }
}

.button--round { 
  @include transition(.3s background ease-in-out);
  
  width: 2rem;
  height: 2rem;
  
  background: $blue;
  
  border-radius: 50%;
  box-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.25);
  
  color: #fff;
  text-decoration: none;
  text-align: center;
  
  i {
    font-size: 1rem;
    line-height: 220%;
    vertical-align: middle;
  }
  
  &:hover {
    background: $blueDark;
  }
}

.button--sticky {
  position: fixed;
  right: 2rem;
  top: 16rem;
}

%slide-up {
  -webkit-animation-duration: $slideDuration;
  animation-duration: $slideDuration;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(rem($slideDistance));
    transform: translateY(rem($slideDistance));
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

Collectives™ on Stack Overflow

Checkbox Angular

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related