Change component template name angular 2

Question

How to change the component name, depend upon the click list i need to change component template <FAQ-omni></FAQ-omni> to some other template its possible ?

<div class="row">
      <div class="col-xlg-4 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12" title="FAQ" baCardClass="medium-card with-scroll">
        <FAQ-omni></FAQ-omni>
      <ul class="alShare">
        <li (click)="Show(1)">Locator</li>
        <li (click)="Show(2)">Offer</li>
        <li (click)="Show(3)">Contact</li>
        <li (click)="Show(4)">Holiday</li>
        <li (click)="Show(5)">FAQ</li>
      </ul>
      </div>
</div>

Oliver Cooke · Accepted Answer · 2017-01-23 11:06:15Z

You shouldn't change the template selector as they are defined on the page, you should build a more generic template and use @Input() to pass the content in and interpolate in on the page or pass in your predefined number.

<div class="row">
    <div class="col-xlg-4 col-xl-12 col-lg-12 col-md-7 col-sm-12 col-xs-12" title="FAQ" baCardClass="medium-card with-scroll">
        <FAQ [faqData]="faqData"></FAQ>
      <ul class="alShare">
        <li (click)="Show(1)">Locator</li>
        <li (click)="Show(2)">Offer</li>
        <li (click)="Show(3)">Contact</li>
        <li (click)="Show(4)">Holiday</li>
        <li (click)="Show(5)">FAQ</li>
      </ul>
    </div>
</div>

code-behind.ts

export class CodeBehind {

    public faqData: SomeObject = {//define default};

    public Show(faqToShow: number) {

        switch(faqToShow) {

        case 1: 
             this.faqData = Locator
        case 2:
        //and so on...

        }
    }
}

faq.component.ts

export class FAQ {

    @Input() public faqData: SomeObject;
}

If you do it the way above you would define the object in the parent component, however passing a number in means you could define the content within FAQ separating it from the parent, but that's up to you.

Ali Baig · Accepted Answer · 2017-01-23 10:49:31Z

Component names are static, what you can do is pass he information to that component with something like

In your component, declare a variable

public selected: number;

In your show method, set the selected as

public show(num: number)
{
    this.selected = num;
}

and then use this selected property in your template to pass information like

<FAQ-omni selected="selected"></FAQ-omni>

In your FAQ-omni component, you can receive this variable as an input like

@Component({
    selector: 'FAQ-omni',
    templateUrl: '/template/path.html',
    inputs: ['selected']
})
export class LoginComponent
{
    public selected: number; 
}

and use this selected in your template to render/hide any information you want.

You can even use this variable to display some other component based on your condition using *ngIf directive.

<FAQ-omni *ngIf="selected == 1"></FAQ-omni>
<SomeOther-Component *ngIf="selected == 2"></SomeOther-Component>

Collectives™ on Stack Overflow

Change component template name angular 2

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