Skip to content

@Input() issues

I’m trying to get data from a variable from another component, but so far it hasn’t been working.

The idea is that when I check a checkbox, the variables (Booleans) become true and some things on my page are visible and vice versa.

So basically I want the variables from InstellingenComponent to work in AfdelingDetailComponent. With @Input() it’s not working… I’m getting undefined.

Here is my settings component:

export class InstellingenComponent implements OnInit {
  toonNaam = false;
  toonTijd = false;
  toonType = false;
  toonSanitair = false;
  toonKinder = false;
  toonSalon = false;
  toonKamerNummer = false;
  hulpKleur = "red";
  behandelKleur = "orange";
  volKleur = "green";
  leegKleur = "white";

my settings html: (yes it’s a dialog)

<h1 md-dialog-title>Instellingen</h1>
<div md-dialog-content>Welke gegevens wil je zien? </div>
<md-checkbox class="check-margin" [(ngModel)]="toonKamerNummer">Kamernummer</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonNaam">Patiƫntnaam</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonTijd">Tijdstip behandeling</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonType">Type behandeling</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonSanitair">sanitair</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonKinder">Kinderverzorgingsruimte</md-checkbox>
<md-checkbox class="check-margin" [(ngModel)]="toonSalon">Salon</md-checkbox>
<div md-dialog-actions>
  <button md-button md-dialog-close="Option 1">Sluiten</button>

The other component with the inputs:

 export class AfdelingdetailComponent implements OnInit {
  @Input() toonNaam:boolean;
  @Input() toonTijd:boolean;
  @Input() toonType:boolean;
  @Input() toonSanitair:boolean;
  @Input() toonKinder:boolean;
  @Input() toonSalon:boolean;
  @Input() toonKamerNummer:boolean;
  @Input() hulpKleur;
  @Input() behandelKleur;
  @Input() volKleur;
  @Input() leegKleur;

And the html of the other component to give you an idea of what I want to do:

<div class="container" *ngIf="selectedAfdeling"
  <div *ngFor="let kamer of selectedAfdeling.kamers">
    <a  [routerLink]="['/patient',]">
      <div class="kamer" [style.width.px]="kamer.width" [style.height.px]="kamer.height"
        <div *ngIf="toonKamerNummer" id="kamernummer">Kamer {{kamer.kamernummer}}</div>
        <div *ngIf="toonNaam">{{kamer.naam}}</div>
        <div *ngIf="toonType">{{kamer.behandelingstype}}</div>
        <div *ngIf="toonTijd">{{kamer.behandelingstijd}}</div>
        <div *ngIf="toonSanitair && kamer.sanitair">
        <div *ngIf="toonKinder && kamer.kinderverzorgingsruimte"><md-icon>child_care</md-icon></div>
        <div *ngIf="toonSalon &&"><md-icon>event_seat</md-icon></div>


New answer

Ok, apparently it is about the way you bind a value with the Angular Material checkboxes. I tried with [(ngModel)] And I failed miserably too.

You should get rid of [(ngModel)] binding (IMHO), and bind your variables like this :

In your template :

<md-checkbox [checked]="myVariable" (change)="myVariable=!myVariable">Check me!</md-checkbox>

Don’t forget to declare AND initialise your variable in the component :

myVariable: boolean = false; // or true

It won’t work as is if the variable is not initialized.

See this plunker :

Thanks to this related question : Angular 2 Checkbox Two Way Data Binding

and to Angular Material doc here :