CODEWITHSUNDEEP
angular
integral100x
integral100x

Reputation: 342

How do I change border style using [style.border] when a question is answered?

I'm having trouble changing border style from $vivid-blue to $medium-gray when the question is answered. This is my code:

<section id="question" [style.border]="!answer ? 'unanswered': 'answered'">

and in the SCSS I have

.unanswered {
  border: 2px solid $vivid-blue !important;
}

.answered {
  border: 2px solid $medium-gray !important;
}

Upvotes: 1

Views: 394

Answers (3)

Rick
Rick

Reputation: 1880

this:

<section id="question" [ngClass]="!answer ? 'unanswered': 'answered'">

or this:

<section id="question" [style.border]="!answer ? 'border: 2px solid blue !important': 'border: 2px solid gray !important'">

Upvotes: 2

Rafi Henig
Rafi Henig

Reputation: 6422

Use ngClass to apply the class name conditionally as following:

<section id="question" [ngClass]="answer ? 'answered': 'unanswered'">

Alternatively you can achieve the same moving the logic code to your component:

public applyClass(): string {
   return (this.answer) ? 'answered' : 'unanswered'
}

Completing this in your template:

<section id="question" [ngClass]="applyClass()">

Upvotes: 0

Robert
Robert

Reputation: 2824

use

<section id="question" [ngClass]="!answer ? 'unanswered': 'answered'">

or

<section id="question" [class.answered]="answer" [class.unanswered]="!answer">

or

<section id="question" [ngClass]="{answered: answer, unanswered: !answer}">

if you want to use style not a class then it will be like

<section id="question" class="calls" [style.border-color]="!answer ? 'blue': 'gray'">

and in your css

.calls {
  border: 2px solid !important;
}

Upvotes: 0

Related Questions