0

In below code I want to give each answer option a different css class. Css Class should be mapped to answer 1,2,3,4 as knock1,knock2,who-s,there.

Template

    <label *ngFor="let answer of answers">
      <input type="radio" [(ngModel)]="selectedOption" [value]="answer.value">
        {{answer.text}}
    </label>

Typescript

this.answers = [
  new Answer(value: 4, text: "Race"),
  new Answer(value: 3, text: "Con"),
  new Answer(value: 2, text: "dit"),
  new Answer(value: 1, text: "ion")
];

I'm a bit rusty in Angular, so I was hoping for a hint in the right direction.

I'm currently trying out, but to no succes, in the input-tag code:

[ngClass]="{'knock1': answer.value === 1}"
Improve this question
1
  • 1
    The simplest way would be to add an inputClass property to the Answer class, and to use [ngClass]="answer.inputClass". Commented Oct 28, 2018 at 0:20

2 Answers 2

Reset to default
4

I would recommend naming your CSS classes according to your values and using string interpolation to render the correct class. This will keep your HTML relatively clean and flexible.

app.component.css

.answer-color-1 {
  background-color: #7CAE7A;
}

.answer-color-2 {
  background-color: #839073;
}

.answer-color-3 {
  background-color: #6E6362;
}

.answer-color-4 {
  background-color: #4E4A59;
}

app.component.html

<label class="radio-inline" *ngFor="let answer of answers">
  <span class="answer-color-{{answer.value}}">
    <input type="radio" [(ngModel)]="selectedOption" name="inlineRadioOptions" [value]="answer.value" >
      {{answer.text}}
  </span>
</label>

DEMO

Also try not to use the same id for multiple elements in a *ngFor loop.

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

1 Comment

I'm giving you the answer for your great effort on best-practice, pointing out potential bugs and the demo page.
1

You are close except that you cannot style an input radio element, one option is to style the label element instead as follow:

<label class="radio-inline" *ngFor="let answer of answers"
     [ngClass]="{'knock1': answer.value === 1, , 'knock2': answer.value === 2}">
      <input type="radio" [(ngModel)]="selectedOption" name="inlineRadioOptions" 
             id="inlineRadio1" [value]="answer.value">
        {{answer.text}}
</label>

Input radio elements (the round shape) cannot be noramlly styled as other HTML elements like div, etc.. but if you really want, there are work arounds, i can provide you if you really need.

Improve this answer

7 Comments

Will the class be set on the input nonetheless? I need it for selenium, not to actually style the input.
Yes it will be applied nonetheless. Although I would question the practise of applying classes or ids for the sole purpose of testing. Have you considered Protractor?
Interesting Point. Protractor is another wrapper around selenium and we decided to directly use webdriver with python. Would you in general recommend protractor over python for Angular apps? Our e2e tests need to run against our mobile app and web apps in a specific manner. We are applying testing-specific classes since so called managers are dancing in circles like apes on cheap russian ethanol thinking Agile means us changing 95% of codebase on a weekly basis. This way we insure our testing classes won't disappear and "management" can shred another dozen of millions of greenback next year.
As @GordonWesterman said the class will be applied nonetheless, I did not know your real intention / use case. For testing either Protractor or directly selenium then I would recommned adding custom attributes e.g. sele-test on elements.
Yes what I mean it is up to you to come up with a name make sense for you, the article @GordonWesterman have code samples. One important point I would like to add, is to prefix your custom attribute name with data- e.g. data-your-custom-test for best practice and avoid potential issues, see developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… and w3schools.com/tags/att_global_data.asp
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.