CODEWITHSUNDEEP
javascriptangularcheckbox
Корвин Кори
Корвин Кори

Reputation: 33

Checkbox Angular

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 />

Upvotes: 1

Views: 466

Answers (4)

rdh
rdh

Reputation: 1

<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);
  }
}

Upvotes: 0

Sam
Sam

Reputation: 1861

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>

Upvotes: 1

firatozcevahir
firatozcevahir

Reputation: 882

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

Upvotes: 1

tmsbrndz
tmsbrndz

Reputation: 1347

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

Upvotes: 1

Related Questions