Tabs - dynamic icon change and color

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Tabs - dynamic icon change and color

szczerbo pro asked 7 years ago

Hello, I have tabs bar (example from https://mdbootstrap.com/angular/components/tabs/), and for every tab I would like to have two icons (only one displayed at time):
  1. success <i class="fa fa-check-circle" aria-hidden="true"></i>   (shown if form fields are filled right)
  2. failure <i class="fa fa-close" aria-hidden="true"></i>    (loaded at start, when form fields are empty)
Questions:
  1. How to change icons dynamically with *ngIf feature form Angular 2/5? (success/failure - it depends on form validation),
  2. How to set colors for icons (success icon should be green, and failure icon should be red)?

Alex Gotardi pro commented 7 years ago

addClass and removeClass dont work for u?

Damian Gemza staff answered 7 years ago

Dear Szczerbo, As Alex Gotardi says, try to use Renderer2's addClass and removeClass. Or even you can have two icons on one tab, but for some condition you can put them styles: visibility: visible i visibility: hidden, and change it with Renderer2 setStyle. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
szczerbo
Pro User
18Support score
8Questions 5Answers
0Snippets likes 0Snippets