Topic: Tabs - dynamic icon change and color
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):
- success <i class="fa fa-check-circle" aria-hidden="true"></i> (shown if form fields are filled right)
- failure <i class="fa fa-close" aria-hidden="true"></i> (loaded at start, when form fields are empty)
- How to change icons dynamically with *ngIf feature form Angular 2/5? (success/failure - it depends on form validation),
- How to set colors for icons (success icon should be green, and failure icon should be red)?
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
Alex Gotardi pro commented 6 years ago
addClass and removeClass dont work for u?