@Input() issues

Question

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>

 </div>
  <app-afdelingdetail
    [toonKamerNummer]="toonKamerNummer"
    [toonNaam]="toonNaam"
    [toonTijd]="toonTijd"
    [toonType]="toonType"
    [toonSanitair]="toonSanitair"
    [toonKinder]="toonKinder"
    [toonSalon]="toonSalon"
    [behandelKleur]="behandelKleur"
    [hulpKleur]="hulpKleur"
    [leegKleur]="leegKleur"
    [volKleur]="volKleur"
  >
  </app-afdelingdetail>

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"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
  <div *ngFor="let kamer of selectedAfdeling.kamers">
    <a  [routerLink]="['/patient', kamer.id]">
      <div class="kamer" [style.width.px]="kamer.width" [style.height.px]="kamer.height"
           [style.background-color]="getColor(kamer)">
        <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">
          <md-icon>wc</md-icon>
        </div>
        <div *ngIf="toonKinder && kamer.kinderverzorgingsruimte"><md-icon>child_care</md-icon></div>
        <div *ngIf="toonSalon && kamer.salon"><md-icon>event_seat</md-icon></div>
      </div>
    </a>

</div>
</div>

I haven't downvoted your question, but it's not very clear : for the last html template you say it's for the "other component", so the *ngIf="blahblah" refers to the variable blahblah in this 'other component' . — Pac0, Jun 08 '17 at 11:07
Sorry. I edited my post a little bit. I want the variables from InstellingenComponent to work in AfdelingDetailComponent. With @Input() it's not working...I'm getting undefined. — Claire, Jun 08 '17 at 11:10
I'm not getting any errors but if I console log one of the viariables in AfdelingDetailComponent, I get undefined. — Claire, Jun 08 '17 at 11:22
Also, I think you should minimize your example (your problem doesn't need the full variable list to be addressed, it's basically the same problem for each variable, isn't it ? ) — Pac0, Jun 08 '17 at 11:41
I made it a bit shorter, thank you for the help. I'm slowly getting there :) — Claire, Jun 08 '17 at 11:49
@KlaartjeDeBacker thank you. Please see my answer, I tried to provide a functioning example. You have to be careful about which variable is declared in which component. Try to see if you understand my example, and how it relates to your example, mainly check that the variables you use in the html templates are corrrectly declared inthe *corresponding component*. Don't hesitate to comment on my answer for questions about it. — Pac0, Jun 08 '17 at 11:54
ok, you could try to show, in your html, the value of your boolean variables ? in each component, like that : `{{toonSalon}}` in the first and the second component. — Pac0, Jun 08 '17 at 11:59
I noticed you didn't declared any "selectedAfdeling" in the first or second component. If you don't, the n it will be undefined. — Pac0, Jun 08 '17 at 12:01
I have declared it :) but I deleted it out while making my code shorter. The ngIf is working too because I can see the borders of the divs that I was creating in my html. — Claire, Jun 08 '17 at 12:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146167/discussion-between-pac0-and-klaartje-de-backer). — Pac0, Jun 08 '17 at 12:14

Pac0 · Accepted Answer · 2017-06-08T21:16:46.620

1

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 : https://plnkr.co/edit/CFLsnh2MDreiEDXKfnXc?p=preview

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

and to Angular Material doc here : https://material.angular.io/components/component/checkbox

edited Jun 08 '17 at 21:16

answered Jun 08 '17 at 11:32

Pac0

21,465
8
65
74

Thank you for your help, this is a great explanation! But as you can see, I think I'm exactly doing as you suggest, or am I missing something? I could try and use different variable names, but don't think that will make a difference. – Claire Jun 08 '17 at 11:52
@KlaartjeDeBacker I agree about your booleans, but there is other variables that you try to use in templates that don't seem to be declared anywhere : "selectedAfdeling" for example. – Pac0 Jun 08 '17 at 12:04
I tired changing the name of the second variable, and now I get: **Can't bind to 'toonKamerNummer2' since it isn't a known property of 'app-afdelingdetail'.** – Claire Jun 08 '17 at 12:04
@KlaartjeDeBacker that is because you didn't change the name of the variable in the class app-afdelingdetail, only in the template, I guess. – Pac0 Jun 08 '17 at 12:05
resterting the server fixed that, luckely :) – Claire Jun 08 '17 at 12:11
1

oh ok, I see, the new template was used, but the old TS file with the old variable name wan't updated . Please try to add some debugging in your template to "see in live" the value of the variables. (both in your first and your second component) – Pac0 Jun 08 '17 at 12:14
let's continue this discussion in the [chatroom](http://chat.stackoverflow.com/rooms/146167/discussion-between-pac0-and-klaartje-de-backer ) to avoid cluttering the comment sections. – Pac0 Jun 08 '17 at 12:15
@KlaartjeDeBacker I played with Material a bit, I think ngModel was the cause of the absence of binding. See new answer and plunker. – Pac0 Jun 08 '17 at 21:18

@Input() issues

1 Answers1