angular 2 conditionally show or hide components

Question

I have 3 buttons and 3 components, What I want is, initially, only the first element visible. Clicking the buttons will show relevant component and hide the not relevant. How would you do that?

@Component({
    selector: 'Parent',
    template: `
        <div class="tab">
            <span class="btn">show child 1</span>
            <span class="btn">show child 2</span>
            <span class="btn">show child 3</span>
        </div>
        <Child1></Child1>
        <Child2></Child2>
        <Child3></Child3>
    `,
})
export class ParentComponent  {
}

This plunker will give you a good understanding embed.plnkr.co/NzMrJixtwZv0l2ohiZgQ — J J B
– J J B, Commented Dec 20, 2016 at 4:39

Vega · Accepted Answer · 2017-09-06 08:58:48Z

11

@Component({
    selector: 'Parent',
    template: `
        <div class="tab">
            <span (click)="show('show1')" class="btn">show child 1</span>
            <span (click)="show('show2')" class="btn">show child 2</span>
            <span (click)="show('show3')" class="btn">show child 3</span>
        </div>

        <div *ngIf="show1"><Child1></Child1></div>
        <div *ngIf="show2"><Child2></Child2></div>
        <div *ngIf="show3"><Child3></Child3></div>
    `
})


export class ParentComponent  {
    public show1 = true;
    public show2 = false;
    public show3 = false;

    show(tab){
        this.show1 = false;
        this.show2 = false;
        this.show3 = false;

        console.log(tab)
        if(tab == 'show1') {
            this.show1 = true
        }
        if(tab == 'show2') {
            this.show2 = true
        }
        if(tab == 'show3') {
            this.show3 = true
        }
    }
}

Very crude form. Optimise the code as you like. But, hope you got the idea.

edited Sep 6, 2017 at 8:58

Vega

28.8k28 gold badges121 silver badges151 bronze badges

answered Dec 20, 2016 at 4:41

Ajey

8,25212 gold badges66 silver badges89 bronze badges

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

2 Comments

Pardeep Jain Over a year ago

Why Downvote ? according to question seems answer is correct

Ajey Over a year ago

Downvoter, please try to explain or give a better solution.

Md. Amanullah · Accepted Answer · 2020-03-06 03:40:10Z

The first option is I will say its better to use lazy loading to solve this problem. Angular Lazy loading.

If you don't want to use lazy loading and want to follow the answer from Ajey, you may follow this way to write less code

  @Component({
  selector: "Parent",
  template: `
    <div class="tab">
      <span (click)="curStep = 'step1'" class="btn">show child 1</span>
      <span (click)="curStep = 'step2'" class="btn">show child 2</span>
      <span (click)="curStep = 'step3'" class="btn">show child 3</span>
    </div>

    <div *ngIf="curStep == 'step1'"><child1></child1></div>
    <div *ngIf="curStep == 'step2'"><child2></child2></div>
    <div *ngIf="curStep == 'step3'"><child3></child3></div>
  `
})
export class ParentComponent {
    curStep: string = "step1";
}

Collectives™ on Stack Overflow

angular 2 conditionally show or hide components

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related