angular 2 hide or show child component

Question

I have a "parent" component whose template includes two other components. I want to show or hide either component somehow. I looked at the multiple component angular.io tutorial to try and figure this out but nothing is happening (and no console errors are coming up).

My "parent" component with it's template is:

@Component({
    selector: 'main-area',
    templateUrl: 'main-area.html',
    directives: [Child1Component, Child2Component]
})
export class MainComponent {
        child1Shown:boolean = true;
        child2Shown:boolean = false;
}

main-area.html -

<div>
    <childOne [hidden]="child1Shown"></childOne>
    <childTwo [hidden]="child2Shown"></childTwo>
</div>

My child components each have a template but here are what the code looks like in them.

Child1:

@Component({
    selector:'childOne',
    templateUrl: 'childOne.html'     
})    

export class Child1Component { 
   @Input() hidden:boolean;
}

Child2:

@Component({
    selector: 'childTwo',
    templateUrl: 'childTwo.html'
})

export class Child2Component {
        @Input() hidden:boolean;
}

When the page loads with it's MainComponent child2 should be hidden (with it's template) and child1 shown (with it's template). However both are being shown. I've tried creating a button with a (click)=setHidden() function on the MainComponent to change the MainComponent properties but nothing happens. What am I missing when it comes to the inter-component communication?

Günter Zöchbauer · Accepted Answer · 2017-10-05 03:14:41Z

4

hidden is a default property. Adding an input with the same name seems to prevent the default behavior. Commenting out the input makes hidden work:

export class Child2Component {
    // @Input() hidden:boolean;
}

Plunker

edited Oct 5, 2017 at 3:14

answered Mar 22, 2016 at 19:28

Günter Zöchbauer

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

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

3 Comments

Justin Over a year ago

You know a part of me wondered if using the default property might be an issue but I quickly dismissed it for no good reason. Thanks!

arn-arn Over a year ago

simple answer to a seemingly complicated question..thanks.

davaus Over a year ago

worth knowing even though this is not the droid I was looking for..thanks!

Martin Bamford · Accepted Answer · 2018-01-08 15:19:12Z

1

The accepted answer is fine but directives has now been deprecated so if you use the code as originally stated in Angular4 then you will get an error.

As long as the child components are declared within @NgModule in the module, they no longer need to to be included in the metadata of the parent component

answered Jan 8, 2018 at 15:19

Martin Bamford

4244 silver badges15 bronze badges

Collectives™ on Stack Overflow

angular 2 hide or show child component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related