Dev Stack Source

Answer : TL;DR use document.body.classList.add and document.body.classList.remove I would have two functions that toggle a piece of state to show/hide the modal within your outer component. Inside these functions I would use the document.body.classList.add and document.body.classList.remove methods to manipulate the body class dependant on the modal's state like below: openModal = (event) => { document.body.classList.add('modal-open'); this.setState({ showModal: true }); } hideModal = (event) => { document.body.classList.remove('modal-open'); this.setState({ showModal: false }); } With the new React (16.8) this can be solved with hooks: import {useEffect} from 'react'; const addBodyClass = className => document.body.classList.add(className); const removeBodyClass = className => document.body.classList.remove(className); export default function useBodyClass(className) { useEffect( () => { // Se...

Answer : I'm not sure that you can apply ng-class to tabs like that. After trying and failing I decided to look at the bootstrap-ui source for tabs and made an interesting discovery related to the tab heading attribute. Apparently you can put html in the heading section if you place the tab-heading as a child to a tab element. Check out the tabheading directive in here. This is the example they show: <tabset> <tab> <tab-heading><b>HTML</b> in my titles?!</tab-heading> And some content, too! </tab> <tab> <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading> That's right. </tab> </tabset> In your case I think you might be able to do something like this to get the same effect: <tab ng-repeat="tab in tabs" active="tab.active"> <tab-heading>{{tab.title}} <span ng-show="tab.new">new<...