Angular: Use ngSwitch on String includes?

Question

I am writing lot of ngIf statements, rendering an html form, when a product description search contains a keyword.

How do I convert this to ngSwitch?

Current ngIf statement

<app-store *ngIf="message?.productDescription.includes('Cars')">
     <app-carform></app-carform>
</app-store>
<app-store *ngIf="message?.productDescription.includes('Reading')">
     <app-bookform></app-bookform>
</app-store>
<app-store *ngIf="message?.productDescription.includes('Furniture')">
     <app-homefurnitureform></app-homefurnitureform>
</app-store>

Example ngSwitch:

I am reading Sample Ngswitch statements, but don't know how to convert the above, if its even possible in angular.

<div [ngSwitch]="productDescription">
  <p *ngSwitchCase="'Cars'"><app-carform></app-carform></p>
  <p *ngSwitchCase="'Reading'"><app-bookform></app-bookform></p>
  <p *ngSwitchCase="'Furniture'"><app-homefurnitureform></app-homefurnitureform></p>
</span>

As per this answer, you can't. Another alternative would be to move the if logic to determine what to be displayed in the component and then you can just call that method when you need it to be displayed on the template. — Nicholas K
– Nicholas K, Commented Nov 7, 2019 at 5:49
It would work but its just a hack. IMO, it would be better to move the if-logic to the component and just call that method from the template (html) — Nicholas K
– Nicholas K, Commented Nov 7, 2019 at 5:55
hi @NicholasK or just simple answer in stack paragraph, either is good, appreciate it! — user12250118
– user12250118, Commented Nov 7, 2019 at 5:57
I guess it will help you stackoverflow.com/questions/43423458/… — Saima Haji
– Saima Haji, Commented Nov 7, 2019 at 5:58
Just observed that you are calling other components based on your if-blocks. In that case, the best you can do is to extract this portion message?.productDescription.includes('Cars') into a method in your component and then invoke that method by passing in a parameter. Not sure if that would work for you. — Nicholas K
– Nicholas K, Commented Nov 7, 2019 at 6:07

JStw · Accepted Answer · 2019-11-07 05:52:45Z

6

I just read something about custom tricks of the ngSwitch condition, can you try something like that :

<div [ngSwitch]="true">
    <app-carform *ngSwitchCase="message?.productDescription.includes('Cars')"></app-carform>
    <app-bookform *ngSwitchCase="message?.productDescription.includes('Reading')"></app-bookform>
    <app-homefurnitureform *ngSwitchCase="message?.productDescription.includes('Cars')"></app-homefurnitureform>
</div>

source: https://stackoverflow.com/a/45950368/8597732

answered Nov 7, 2019 at 5:52

JStw

1,21513 silver badges23 bronze badges

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

Comments

Poldo · Accepted Answer · 2019-11-07 05:42:44Z

0

create function for your switch, for readable and clean code.

public  mySelection(selection: string): string {
    switch (selection) {
       case 'gf':
           return 'Gluten-free';
        default:
           return 'Standard';
    }
}

In your html

<div>
  <p >{{ mySelection('dietSelection') }}</p>
</span>

answered Nov 7, 2019 at 5:42

Poldo

1,9321 gold badge15 silver badges27 bronze badges

1 Comment

user12250118 Over a year ago

hi @Poldo, well I need to display application components, you'res is only displaying values, which will not be sufficient for what I'm trying to do, thanks

Collectives™ on Stack Overflow

Angular: Use ngSwitch on String includes?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related