Input and output in angular2

Question

I'm creating an angular2 application. I have a child component (MountainListComponent) which is made up of other components (but that's not important) that is included into a parent component. In the child component I have a list of mountains (<my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>), when I click on a mountain I'd like to pass a boolean variable (hidelist) to the parent component.

The code of these 2 components are below. I've removed boilerplate code.

Parent component:

import {Component, Input} from "angular2/core";
import {MountainListComponent} from "./mountain-list.component";

@Component({
    selector: 'my-mountains',
    template: `hidelist value: {{hidelist}}
        <div class="row spacing" (childChanged)="hidelist=$event" *ngIf="!hidelist">
            <my-mountain-list></my-mountain-list>
        </div>
    `
})

export class MountainsComponent {
    hidelist = false;
}

Child component:

import {Component, Output, EventEmitter} from "angular2/core";
import {MountainComponent} from "./mountain.component";
import {Mountain} from "./mountain";

@Component({
    selector: 'my-mountain-list',
    template: `
        <section class="col-md-12">
            <my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>     
        </section>
    `,
    directives: [MountainComponent],
    outputs: ['childChanged']
})

export class MountainListComponent implements OnInit {
    childChanged = new EventEmitter<boolean>();

    onChange() {
        var hidelist: boolean;
        hidelist = true;
        this.childChanged.emit(hidelist);
    }
}

The problem is that hidelist variable value is always false

Günter Zöchbauer · Accepted Answer · 2016-05-14 18:10:35Z

0

Add a template variable #mountain than you can refer to that component in the event expression:

<my-mountain class="col-md-4" 
    *ngFor="#mountain of mountains" [mountain]="mountain" 
    #mountain 
    (click)="onChange(mountain.hidelist)"></my-mountain>

answered May 14, 2016 at 18:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

Anand Kumar · Accepted Answer · 2016-10-25 01:34:51Z

0

Move the custom event binding from div to <my-mountain-list> component like the below.

<my-mountain-list (childChanged)="hidelist=$event"></my-mountain-list>

I have updated parent component :-

import {Component, Input} from "angular2/core";
import {MountainListComponent} from "./mountain-list.component";

@Component({
    selector: 'my-mountains',
    template: `hidelist value: {{hidelist}}
        <div class="row spacing" *ngIf="!hidelist">
            <my-mountain-list (childChanged)="hidelist=$event"></my-mountain-list>
        </div>
    `
})

export class MountainsComponent {
    hidelist = false;
}

answered Oct 25, 2016 at 1:34

Anand Kumar

1281 silver badge5 bronze badges

Collectives™ on Stack Overflow

Input and output in angular2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related