angular conditional operator: execute multiple statement

Question

Here is the logic: On enter, execute the following if statement

if (!elementB.isOpen){
    elementB.open()
else {
    elementC.open()
    elementC.focus()
    elementB.close()
}

I want to use the ? conditional operator and add it after (keyup.enter):

<mat-form-field (keyup.enter)="!elementB.isOpen ? elementB.open() : elementC.open();elementC.focus();elementB.close()">

However the code above gave me an error. It seems like I cannot execute multiple lines of code with conditional operator( ? : ).

Can anyone help me with this? Thanks!

Well you can, separating each statement by a **,**. But it's not really recommended. You should keep more of your logic in TypeScript. It's more managable and unit-testable that way. — SiddAjmera
– SiddAjmera, Commented Oct 3, 2018 at 13:55

rrd · Accepted Answer · 2018-10-03 13:54:01Z

3

Use the component file rather than stuffing the template full of logic:

<mat-form-field (keyup.enter)="elementActions()">

In your component:

public elementActions(): void {
  if (!this.elementB.isOpen) {
    elementB.open();
  } else {
    this.elementC.open();
    this.elementC.focus();
    this.elementB.close();
  }
}

I know it's terribly mundane, but that's what the component.ts file should really be used for.

answered Oct 3, 2018 at 13:54

rrd

5,9873 gold badges32 silver badges37 bronze badges

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

1 Comment

Meng Over a year ago

elementB and elementC are ids of mat-select, like: <mat-select placeholder="Contact" [formControl]="contact" #elementB>. How can I access them in my.component.ts and apply functions like open(), focus()...

Ganesh · Accepted Answer · 2018-10-05 02:30:24Z

2

try to give else in a method,so that you can simplify the logic

<mat-form-field (keyup.enter)="!elementB.isOpen ? elementB.open() : changeElement(elementC,elementB)">

  changeElement(elementC: any, elemenB: any) :void {
        elementC.open();
        elementC.focus();
        elementB.close();
    }

edited Oct 5, 2018 at 2:30

answered Oct 3, 2018 at 14:03

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

2 Comments

Meng Over a year ago

elementB and elementC are ids of mat-select, like: <mat-select placeholder="Contact" [formControl]="contact" #elementB>. How can I access them in my.component.ts and apply functions like open(), focus()...

Ganesh Over a year ago

add elements as parameters in changeElement(elementC,elementB)

Sachila Ranawaka · Accepted Answer · 2018-10-03 13:53:37Z

0

Wrap it around brackets

<mat-form-field (keyup.enter)="!elementB.isOpen ? (elementB.open()) : (elementC.open(),elementC.focus(),elementB.close())">

answered Oct 3, 2018 at 13:53

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

Meng Over a year ago

, is not working: Parser Error: Unexpected token ','

Collectives™ on Stack Overflow

angular conditional operator: execute multiple statement

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related